fix(ui): Card gets min-w-0 so children inside grid tracks can shrink
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.
This commit is contained in:
@@ -65,7 +65,7 @@ export function ProstheticForm({ defaultCurrency }: { defaultCurrency: string })
|
|||||||
)}
|
)}
|
||||||
</div>
|
</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">
|
<div className="grid gap-2">
|
||||||
<Label htmlFor="unitPrice">Birim Fiyatı *</Label>
|
<Label htmlFor="unitPrice">Birim Fiyatı *</Label>
|
||||||
<Input
|
<Input
|
||||||
|
|||||||
@@ -286,7 +286,7 @@ function EditDialog({
|
|||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</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">
|
<div className="grid gap-2">
|
||||||
<Label htmlFor={`edit-price-${row.$id}`}>Birim Fiyatı *</Label>
|
<Label htmlFor={`edit-price-${row.$id}`}>Birim Fiyatı *</Label>
|
||||||
<Input
|
<Input
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
|
|||||||
<div
|
<div
|
||||||
data-slot="card"
|
data-slot="card"
|
||||||
className={cn(
|
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
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
@@ -65,7 +65,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="card-content"
|
data-slot="card-content"
|
||||||
className={cn("px-6", className)}
|
className={cn("min-w-0 px-6", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user