scriptoriumadmin/fabro
1
0
Fork 0
mirror of https://github.com/fabro-sh/fabro.git synced 2026-10-09 03:20:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix(web): propagate definite height through full-height layout chain

Browse source 
The full-height shell used min-h-dvh, which only sets a minimum and
leaves height: auto. CSS percentage heights (h-full) don't resolve
against an auto parent, so every descendant that relied on h-full
collapsed to its content size — leaving the run stages column
separator, events list, and detail panel ending mid-page instead of
reaching the window bottom.

Switch the shell to h-dvh, make the run-detail outlet wrapper a flex
column, and replace h-full with flex-1 on the run-stages and
run-files roots so they grow via flex sizing within the column. The
height chain is now: shell h-dvh → main flex-1 → layout div h-full →
run-detail h-full → outlet wrapper flex-1 flex-col → page root flex-1
→ children fill via flex stretch.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Bryan Helmkamp 2026-05-07 11:43:03 -07:00
parent f7fd30f36c
commit de9656dfb7
No known key found for this signature in database
4 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/fabro-web/app/layouts/app-shell.tsx
View file

@ -83,7 +83,7 @@ export default function AppShell() {
<div
className={classNames(
"isolate",
fullHeight ? "flex min-h-dvh flex-col" : "min-h-full",
fullHeight ? "flex h-dvh flex-col" : "min-h-full",
)}
>
<Disclosure

2
apps/fabro-web/app/routes/run-detail.tsx
View file

@ -333,7 +333,7 @@ export default function RunDetail({ params }: { params: { id: string } }) {
</nav>
</div>
<div className={fullHeight ? "mt-6 min-h-0 flex-1" : "mt-6"}>
<div className={fullHeight ? "mt-6 flex min-h-0 flex-1 flex-col" : "mt-6"}>
<Outlet />
</div>

4
apps/fabro-web/app/routes/run-files.tsx
View file

@ -483,7 +483,7 @@ export default function RunFiles() {
if (files.length === 0) {
return (
<div ref={containerRef} className="flex h-full min-h-0 flex-col gap-4">
<div ref={containerRef} className="flex min-h-0 flex-1 flex-col gap-4">
{toolbar}
{meta.degraded ? (
<DegradedBanner reason={meta.degraded_reason} />
@ -500,7 +500,7 @@ export default function RunFiles() {
}
return (
<div ref={containerRef} className="flex h-full min-h-0 flex-col gap-4">
<div ref={containerRef} className="flex min-h-0 flex-1 flex-col gap-4">
<div className="shrink-0 space-y-4">
{toolbar}
{revalidationError ? (

2
apps/fabro-web/app/routes/run-stages.tsx
View file

@ -426,7 +426,7 @@ export default function RunStages() {
const runStart = runQuery.data?.created_at;
return (
<div className="-mt-6 flex h-full min-h-0">
<div className="-mt-6 flex min-h-0 flex-1">
<div className="shrink-0 pb-6 pr-3 pt-6">
<StageSidebar stages={stages} runId={id} selectedStageId={selectedStage.id} />
</div>