From 90abb398faecd2f3032b76e893bb9dcf97e64f69 Mon Sep 17 00:00:00 2001
From: kovakmedya <egecankomur@gmail.com>
Date: Thu, 21 May 2026 22:40:44 +0300
Subject: [PATCH] fix(ui): Card gets min-w-0 so children inside grid tracks can
 shrink
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Even after switching the page-level grid columns to minmax(0,1fr), the
Card primitive itself was still bringing its intrinsic min-content into
the column — every Card defaults to 'min-width: auto', and a Card with
a wide table inside resolves min-content to the table width. That meant
the column still couldn't collapse and the table's overflow-x-auto
wrapper never saw a constrained parent, so the action buttons spilled
past the Card border.

Added 'min-w-0' to Card and CardContent so:
  - the Card collapses to whatever the grid track allows;
  - CardContent collapses inside the Card, letting the Table wrapper
    finally enforce its overflow-x-auto scroll.

Also fixed two inner form grids that had the same '1fr' overflow trap:
ProstheticForm and ProstheticsTable's edit dialog both use a
[price][currency] split, switched to minmax(0,1fr)_100px so the 'Para
birimi' label / TRY value no longer get pushed past the form edge.
---
 src/app/(dashboard)/products/components/prosthetic-form.tsx   | 2 +-
 src/app/(dashboard)/products/components/prosthetics-table.tsx | 2 +-
 src/components/ui/card.tsx                                    | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/(dashboard)/products/components/prosthetic-form.tsx b/src/app/(dashboard)/products/components/prosthetic-form.tsx
index 72b31ce..bd71bdf 100644
--- a/src/app/(dashboard)/products/components/prosthetic-form.tsx
+++ b/src/app/(dashboard)/products/components/prosthetic-form.tsx
@@ -65,7 +65,7 @@ export function ProstheticForm({ defaultCurrency }: { defaultCurrency: string })
         )}
       </div>
 
-      <div className="grid gap-2 grid-cols-[1fr_100px]">
+      <div className="grid gap-2 grid-cols-[minmax(0,1fr)_100px]">
         <div className="grid gap-2">
           <Label htmlFor="unitPrice">Birim Fiyatı *</Label>
           <Input
diff --git a/src/app/(dashboard)/products/components/prosthetics-table.tsx b/src/app/(dashboard)/products/components/prosthetics-table.tsx
index aa45b48..b2e1bc2 100644
--- a/src/app/(dashboard)/products/components/prosthetics-table.tsx
+++ b/src/app/(dashboard)/products/components/prosthetics-table.tsx
@@ -286,7 +286,7 @@ function EditDialog({
               </SelectContent>
             </Select>
           </div>
-          <div className="grid grid-cols-[1fr_100px] gap-3">
+          <div className="grid grid-cols-[minmax(0,1fr)_100px] gap-3">
             <div className="grid gap-2">
               <Label htmlFor={`edit-price-${row.$id}`}>Birim Fiyatı *</Label>
               <Input
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index d05bbc6..f0a4f25 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        "bg-card text-card-foreground flex min-w-0 flex-col gap-6 rounded-xl border py-6 shadow-sm",
         className
       )}
       {...props}
@@ -65,7 +65,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-content"
-      className={cn("px-6", className)}
+      className={cn("min-w-0 px-6", className)}
       {...props}
     />
   )