feat: adjust column widths

sadmann7 · May 11, 2024 · 1cec0e5 · 1cec0e5
1 parent 15c02b0
commit 1cec0e5
Showing 1 changed file with 26 additions and 22 deletions.
diff --git a/src/app/data-table/_components/data-table-demo.tsx b/src/app/data-table/_components/data-table-demo.tsx
@@ -153,25 +153,27 @@ export const columns: ColumnDef<Payment>[] = [
       const payment = row.original
 
       return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="size-8 p-0">
-              <span className="sr-only">Open menu</span>
-              <DotsHorizontalIcon className="size-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-            <DropdownMenuItem
-              onClick={() => navigator.clipboard.writeText(payment.id)}
-            >
-              Copy payment ID
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>View customer</DropdownMenuItem>
-            <DropdownMenuItem>View payment details</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <div className="flex justify-end">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="size-8">
+                <span className="sr-only">Open menu</span>
+                <DotsHorizontalIcon className="size-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuLabel>Actions</DropdownMenuLabel>
+              <DropdownMenuItem
+                onClick={() => navigator.clipboard.writeText(payment.id)}
+              >
+                Copy payment ID
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>View customer</DropdownMenuItem>
+              <DropdownMenuItem>View payment details</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
       )
     },
     enableHiding: false,
@@ -180,9 +182,11 @@ export const columns: ColumnDef<Payment>[] = [
   {
     id: "drag",
     cell: () => (
-      <SortableDragHandle variant="ghost" size="icon" className="size-8">
-        <DragHandleDots2Icon className="size-4" aria-hidden="true" />
-      </SortableDragHandle>
+      <div className="flex justify-end">
+        <SortableDragHandle variant="ghost" size="icon" className="size-8">
+          <DragHandleDots2Icon className="size-4" aria-hidden="true" />
+        </SortableDragHandle>
+      </div>
     ),
     enableSorting: false,
     enableHiding: false,