Gradio Layout Gym — Batch 1

Executive Summary

4 challenges, 11 CSS variants, 66 screenshots at 3 viewport sizes (1400×900, 1400×600, 800×600). Each challenge tests a specific layout skill in isolation — Polya-style — with baseline (no CSS) vs 2-3 CSS approaches.

Challenge 2: Multi-Column Equal Height

Goal: Three columns of uneven content fill the viewport equally. Footer stays visible. No page-level scroll.

Why it matters: Dashboard layouts need side-by-side panels that don't push each other around when content varies.

Results at 1400×900

A: Baseline — All 39 items render in left col. Page very tall. Footer technically visible only at bottom of long page.

B: Flex CSS — Footer visible ✓. But left column content completely hidden! Only headers show. Right column shows ~13 items then clips.

C: Min-Height — Nearly identical to B. Footer visible ✓. Left column content still hidden. calc(100vh - 150px) caps height.

Full-page comparison (A baseline — shows the problem)

A: Full page — Page extends far below viewport. Left column's 39 items force page-level scroll. Footer at the very bottom.

Fix needed

Target the deeper content container. Instead of .equal-row > div { overflow-y: auto }, need something like:

.equal-row > div > div { overflow-y: auto !important; max-height: 100% !important; }

Or use Gradio's elem_classes on the Markdown component itself to give it explicit scroll behavior. This is a follow-up experiment for Ch02-D.

Challenge 3: Nested Tabs

Goal: Outer tabs containing inner tabs. Content fills available space. Footer stays visible.

Why it matters: Brain app uses nested tabs (Extract/Vario/Reduce, each with sub-views). Content overflow in tabs is a real production bug.

A: Baseline — Nested tabs render correctly. Shows sections 1-10. Footer NOT visible (pushed below by 24 sections of content).

B: Flex CSS — Footer IS visible ✓. Shows sections 1-8 contained within tab area. Content scrolls within the tab panel.

Why tabs work but columns don't: Gradio's tab implementation (.tabitem) already has a more structured DOM hierarchy that responds well to flex cascading. Column content is flatter, so the overflow rules miss the actual content div.

Challenge 4: Responsive Columns

Goal: 6 dashboard cards in a grid that reflows from 3 columns (wide) → 2 columns (medium) → 1 column (narrow).

Why it matters: Dashboard layouts need to work on different screen sizes without custom breakpoint management.

At 1400×900 (wide)

A: Baseline — 3 columns × 2 rows. Clean layout, footer visible. Gradio default works well here.

B: CSS Grid — Cards stack in SINGLE COLUMN at 1400px! Grid CSS doesn't override Gradio's internal wrappers. Fail

C: min_width=300 — 3 columns × 2 rows. Identical to baseline. Gradio's native layout works. Pass

At 800×600 (narrow — the real test)

B: CSS Grid — Still single column. CSS Grid approach is completely broken with Gradio's component wrapper structure.

C: min_width=300 — Reflows to 2 columns × 3 rows at 800px! Exactly right

Challenge 5: Sidebar + Main

Goal: Fixed-width nav sidebar on the left. Main content area fills remaining width and scrolls independently. Footer stays visible.

Why it matters: Common app shell pattern. The sidebar (navigation, filters, controls) must stay visible while main content scrolls.

A: Baseline — Sidebar + main render correctly. But footer NOT visible — HTML content pushes page down. Same problem as Ch02-A.

B: Flex CSS — Footer visible ✓, sidebar has border ✓. BUT main content area is EMPTY — HTML content completely clipped by overflow:hidden. Fail

C: Fixed 220px — Sidebar at correct width with border ✓. Main shows 12 sections. Footer NOT visible (no viewport lock). Partial

Full-page B vs C comparison

B: Full page — Viewport-locked. Footer at bottom. But main content area genuinely empty — the HTML is clipped, not scrollable.

Fix strategy for Ch05-D

Combine C's explicit pixel widths with viewport locking, but apply overflow-y: auto at a deeper DOM level — targeting the actual content container inside the main column, not just the column wrapper.

Lessons Learned

CSS Pattern Library (so far)

Pattern 1: Viewport Lock with Tabs (works)

/* Lock container to viewport */
.gradio-container {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
/* Cascade flex down Gradio's wrapper chain */
.gradio-container > .main,
.gradio-container > .main > .wrap,
.gradio-container > .main > .wrap > .contain,
.gradio-container > .main > .wrap > .contain > div {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
/* Tab panels scroll their content */
.tabs { flex: 1 !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; }
.tabitem { flex: 1 !important; min-height: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; }
.tabitem > div { flex: 1 !important; min-height: 0 !important; overflow-y: auto !important; }
footer { flex-shrink: 0 !important; }

Pattern 2: Responsive Columns (works)

# Python — just use min_width, no CSS needed
with gr.Row():
    for title, desc in cards:
        with gr.Column(scale=1, min_width=300):
            gr.Markdown(f"### {title}\n{desc}")

Pattern 3: Fixed Sidebar Width (partially works — needs viewport lock fix)

.fixed-sidebar-row > div:first-child {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    overflow-y: auto !important;
    border-right: 2px solid #ccc !important;
}
.fixed-sidebar-row > div:last-child {
    flex: 1 !important;
    overflow-y: auto !important;
}

Next Steps

1. Ch02-D / Ch05-D: Fix the overflow clipping — Inspect Gradio's actual DOM structure (DevTools), find the right depth for overflow-y: auto. This is the key unsolved problem from batch 1.
2. Ch06: Sticky header + scrolling body — Header with controls stays put, body scrolls.
3. Ch07: Dynamic content — Content added after page load (streaming, button clicks). Does layout survive?
4. Ch08: Gradio component sizing — gr.Code, gr.Dataframe, gr.Plot filling containers.
5. Graduate lessons 1-7 to ~/.claude/howto/gradio.md and gradio-layout skill.