From 58f4b729398d5a9f21769c8857ae445fe21bf8a4 Mon Sep 17 00:00:00 2001
From: apoorv taneja <purutaneja.com@gmail.com>
Date: Thu, 8 Feb 2024 13:31:38 +0530
Subject: [PATCH 1/2] added fixed width for status col

---
 apps/web/src/app/(dashboard)/documents/data-table.tsx | 1 +
 packages/ui/primitives/data-table.tsx                 | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/app/(dashboard)/documents/data-table.tsx b/apps/web/src/app/(dashboard)/documents/data-table.tsx
index c8adb1422..a1bc76b1d 100644
--- a/apps/web/src/app/(dashboard)/documents/data-table.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table.tsx
@@ -72,6 +72,7 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
             header: 'Status',
             accessorKey: 'status',
             cell: ({ row }) => <DocumentStatus status={row.getValue('status')} />,
+            size: 140,
           },
           {
             header: 'Actions',
diff --git a/packages/ui/primitives/data-table.tsx b/packages/ui/primitives/data-table.tsx
index 9cc14a684..55895e08f 100644
--- a/packages/ui/primitives/data-table.tsx
+++ b/packages/ui/primitives/data-table.tsx
@@ -115,7 +115,12 @@ export function DataTable<TData, TValue>({
               table.getRowModel().rows.map((row) => (
                 <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
                   {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>
+                    <TableCell
+                      key={cell.id}
+                      style={{
+                        width: cell.column.getSize(),
+                      }}
+                    >
                       {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </TableCell>
                   ))}

From 7f31ab1ce39f6fa8a150b0484d8f9c85dbee8ca0 Mon Sep 17 00:00:00 2001
From: Lucas Smith <me@lucasjamessmith.me>
Date: Mon, 11 Mar 2024 00:52:56 +0000
Subject: [PATCH 2/2] fix: add scrollbar gutter property

---
 packages/ui/primitives/data-table.tsx | 2 +-
 packages/ui/styles/theme.css          | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/ui/primitives/data-table.tsx b/packages/ui/primitives/data-table.tsx
index 55895e08f..0d8556d89 100644
--- a/packages/ui/primitives/data-table.tsx
+++ b/packages/ui/primitives/data-table.tsx
@@ -118,7 +118,7 @@ export function DataTable<TData, TValue>({
                     <TableCell
                       key={cell.id}
                       style={{
-                        width: cell.column.getSize(),
+                        width: `${cell.column.getSize()}px`,
                       }}
                     >
                       {flexRender(cell.column.columnDef.cell, cell.getContext())}
diff --git a/packages/ui/styles/theme.css b/packages/ui/styles/theme.css
index 8e488ad95..70a06ad15 100644
--- a/packages/ui/styles/theme.css
+++ b/packages/ui/styles/theme.css
@@ -81,7 +81,7 @@
     --ring: 95.08 71.08% 67.45%;
 
     --radius: 0.5rem;
-    
+
     --warning: 54 96% 45%;
   }
 }
@@ -91,6 +91,11 @@
     @apply border-border;
   }
 
+  html,
+  body {
+    scrollbar-gutter: stable;
+  }
+
   body {
     @apply bg-background text-foreground;
     font-feature-settings: 'rlig' 1, 'calt' 1;