fix: remove free tier

apps/dashboard/src/components/overview/overview-widget-table.tsx

@@ -24,11 +24,11 @@ export const OverviewWidgetTable = <T,>({
       <WidgetTable
         data={data ?? []}
         keyExtractor={keyExtractor}
-        className={'text-sm min-h-[358px] @container'}
-        columnClassName="group/row [&>*:first-child]:pl-4 [&>*:last-child]:pr-4 [&_th]:pt-3"
+        className={'text-sm min-h-[358px] @container [&_.head]:pt-3'}
+        columnClassName="[&_.cell:first-child]:pl-4 [&_.cell:last-child]:pr-4"
         eachRow={(item) => {
           return (
-            <div className="absolute inset-0 !p-0">
+            <div className="absolute top-0 left-0 !p-0 w-full h-full">
               <div
                 className="h-full bg-def-200 group-hover/row:bg-blue-200 dark:group-hover/row:bg-blue-900 transition-colors relative"
                 style={{
@@ -44,7 +44,7 @@ export const OverviewWidgetTable = <T,>({
             className: cn(
               index === 0
                 ? 'text-left w-full font-medium min-w-0'
-                : 'text-right w-20 font-mono',
+                : 'text-right font-mono',
               index !== 0 &&
                 index !== columns.length - 1 &&
                 'hidden @[310px]:table-cell',
@@ -72,10 +72,12 @@ export function OverviewWidgetTableLoading({
         {
           name: 'Path',
           render: () => <Skeleton className="h-4 w-1/3" />,
+          width: '1fr',
         },
         {
           name: 'BR',
           render: () => <Skeleton className="h-4 w-[30px]" />,
+          width: '60px',
         },
         // {
         //   name: 'Duration',
@@ -84,6 +86,7 @@ export function OverviewWidgetTableLoading({
         {
           name: 'Sessions',
           render: () => <Skeleton className="h-4 w-[30px]" />,
+          width: '84px',
         },
       ]}
     />
@@ -131,6 +134,7 @@ export function OverviewWidgetTablePages({
       columns={[
         {
           name: 'Path',
+          width: '1fr',
           render(item) {
             return (
               <Tooltiper asChild content={item.origin + item.path} side="left">
@@ -173,20 +177,21 @@ export function OverviewWidgetTablePages({
         },
         {
           name: 'BR',
-          className: 'w-16',
+          width: '60px',
           render(item) {
             return number.shortWithUnit(item.bounce_rate, '%');
           },
         },
         {
           name: 'Duration',
+          width: '75px',
           render(item) {
             return number.shortWithUnit(item.avg_duration, 'min');
           },
         },
         {
           name: lastColumnName,
-          // className: 'w-28',
+          width: '84px',
           render(item) {
             return (
               <div className="row gap-2 justify-end">
@@ -228,6 +233,7 @@ export function OverviewWidgetTableBots({
       columns={[
         {
           name: 'Path',
+          width: '1fr',
           render(item) {
             return (
               <Tooltiper asChild content={item.origin + item.path} side="left">
@@ -256,7 +262,7 @@ export function OverviewWidgetTableBots({
         },
         {
           name: 'Bot',
-          // className: 'w-28',
+          width: '60px',
           render(item) {
             return (
               <div className="row gap-2 justify-end">
@@ -267,7 +273,7 @@ export function OverviewWidgetTableBots({
         },
         {
           name: 'Date',
-          // className: 'w-28',
+          width: '60px',
           render(item) {
             return (
               <div className="row gap-2 justify-end">
@@ -290,6 +296,7 @@ export function OverviewWidgetTableGeneric({
   data: RouterOutputs['overview']['topGeneric'];
   column: {
     name: string;
+    width: string;
     render: (
       item: RouterOutputs['overview']['topGeneric'][number],
     ) => React.ReactNode;
@@ -307,7 +314,7 @@ export function OverviewWidgetTableGeneric({
         column,
         {
           name: 'BR',
-          className: 'w-16',
+          width: '60px',
           render(item) {
             return number.shortWithUnit(item.bounce_rate, '%');
           },
@@ -320,6 +327,7 @@ export function OverviewWidgetTableGeneric({
         // },
         {
           name: 'Sessions',
+          width: '84px',
           render(item) {
             return (
               <div className="row gap-2 justify-end">

apps/dashboard/src/components/report-chart/funnel/chart.tsx

@@ -212,12 +212,14 @@ export function Tables({
                   <span className="truncate">{item.event.displayName}</span>
                 </div>
               ),
+              width: '1fr',
               className: 'text-left font-mono font-semibold',
             },
             {
               name: 'Completed',
               render: (item) => number.format(item.count),
               className: 'text-right font-mono',
+              width: '82px',
             },
             {
               name: 'Dropped after',
@@ -226,11 +228,13 @@ export function Tables({
                   ? number.format(item.dropoffCount)
                   : null,
               className: 'text-right font-mono',
+              width: '110px',
             },
             {
               name: 'Conversion',
               render: (item) => number.formatWithUnit(item.percent / 100, '%'),
               className: 'text-right font-mono font-semibold',
+              width: '90px',
             },
           ]}
         />

apps/dashboard/src/components/widget-table.tsx

@@ -5,6 +5,7 @@ export interface Props<T> {
     name: React.ReactNode;
     render: (item: T, index: number) => React.ReactNode;
     className?: string;
+    width: string;
   }[];
   keyExtractor: (item: T) => string;
   data: T[];
@@ -40,58 +41,71 @@ export function WidgetTable<T>({
   eachRow,
   columnClassName,
 }: Props<T>) {
+  const gridTemplateColumns =
+    columns.length > 1
+      ? `1fr ${columns
+          .slice(1)
+          .map(() => 'auto')
+          .join(' ')}`
+      : '1fr';
+
   return (
     <div className="w-full overflow-x-auto">
       <div className={cn('w-full', className)}>
-        <table className="w-full table-fixed">
-          <thead>
-            <tr
+        {/* Header */}
+        <div
+          className={cn('grid border-b border-border head', columnClassName)}
+          style={{ gridTemplateColumns }}
+        >
+          {columns.map((column) => (
+            <div
+              key={column.name?.toString()}
               className={cn(
-                'border-b border-border text-right last:border-0 [&_td:first-child]:text-left',
-                '[&>td]:p-2',
+                'p-2 font-medium font-sans text-sm whitespace-nowrap cell',
+                columns.length > 1 && column !== columns[0]
+                  ? 'text-right'
+                  : 'text-left',
+                column.className,
+              )}
+              style={{ width: column.width }}
+            >
+              {column.name}
+            </div>
+          ))}
+        </div>
+
+        {/* Body */}
+        <div className="flex flex-col body">
+          {data.map((item, index) => (
+            <div
+              key={keyExtractor(item)}
+              className={cn(
+                'group/row relative border-b border-border last:border-0 h-8',
                 columnClassName,
               )}
             >
-              {columns.map((column) => (
-                <th
-                  key={column.name?.toString()}
-                  className={cn(
-                    column.className,
-                    'font-medium font-sans text-sm p-2 whitespace-nowrap',
-                  )}
-                >
-                  {column.name}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {data.map((item, index) => (
-              <tr
-                key={keyExtractor(item)}
-                className={cn(
-                  'h-8 border-b border-border text-right last:border-0 [&_td:first-child]:text-left relative',
-                  '[&>td]:p-2',
-                  columnClassName,
-                )}
-              >
-                {columns.map((column, columnIndex) => (
-                  <td
+              {eachRow?.(item, index)}
+              <div className="grid" style={{ gridTemplateColumns }}>
+                {columns.map((column) => (
+                  <div
                     key={column.name?.toString()}
                     className={cn(
-                      'h-8',
-                      columnIndex !== 0 && 'relative z-5',
+                      'p-2 relative cell',
+                      columns.length > 1 && column !== columns[0]
+                        ? 'text-right'
+                        : 'text-left',
                       column.className,
+                      column.width === '1fr' && 'w-full min-w-0',
                     )}
+                    style={{ width: column.width }}
                   >
-                    {columnIndex === 0 && eachRow?.(item, index)}
                     {column.render(item, index)}
-                  </td>
+                  </div>
                 ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );