fix(locations): size card to content instead of full viewport
CI / Lint · Typecheck · Test · Build (push) Successful in 47s
CI / Playwright (smoke) (push) Has been skipped
CI / Build & push images (push) Successful in 1m4s

The page forced the card to fill the viewport via h-[calc(100vh-...)],
leaving awkward empty space when few bins were present. Drop the fixed
height so the card sizes to its tallest column and let the page scroll
naturally if the bin grid overflows.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-04-17 14:38:34 -04:00
parent 0b29e706b0
commit 13e3444258
+4 -4
View File
@@ -45,12 +45,12 @@ export default function Locations() {
); );
return ( return (
<div className="flex h-[calc(100vh-var(--spacing-topbar,3.25rem)-3rem)] flex-col gap-4"> <div className="flex flex-col gap-4">
<PageHeader <PageHeader
title="Locations" title="Locations"
description="Sites → Rooms → Bins. Pick a room to see its bins." description="Sites → Rooms → Bins. Pick a room to see its bins."
/> />
<div className="grid min-h-0 flex-1 grid-cols-[18rem_1fr] overflow-hidden rounded-lg border border-border bg-card"> <div className="grid grid-cols-[18rem_1fr] overflow-hidden rounded-lg border border-border bg-card">
<div className="border-r border-border"> <div className="border-r border-border">
<SiteRoomTree <SiteRoomTree
siteId={siteId} siteId={siteId}
@@ -60,9 +60,9 @@ export default function Locations() {
canEdit={canEdit} canEdit={canEdit}
/> />
</div> </div>
<div className="flex min-h-0 flex-col"> <div className="flex flex-col">
<Breadcrumb siteName={siteName} roomName={roomName} /> <Breadcrumb siteName={siteName} roomName={roomName} />
<div className="min-h-0 flex-1 overflow-y-auto"> <div className="flex-1">
{roomId ? ( {roomId ? (
<BinGrid roomId={roomId} canEdit={canEdit} /> <BinGrid roomId={roomId} canEdit={canEdit} />
) : ( ) : (