# Gradio Layout Experiments

Structured record of layout experiments, observations, and fixes.

---

## KEY FINDING: CSS_FLEX_VIEWPORT Makes a Real Difference

**The CSS matters when using HTML components with long content.**

| Aspect | Without CSS (Baseline) | With CSS_FLEX_VIEWPORT |
|--------|------------------------|------------------------|
| Footer | Pushed below viewport | Always visible |
| HTML content | Renders full height, extends page | Contained in scrollable div |
| Page height | Grows with content | Fixed to viewport |
| Scroll behavior | Page-level scrolling | Component-level scrolling |
| Radio buttons | Compact inline style | Card-style buttons |

---

## Experiment 0: Baseline (No Custom CSS)

**Date**: 2026-01-24
**CSS Applied**: CSS_BASELINE (empty)
**Content**: Long (markdown with 30 sections)
**Viewports Tested**: 1400x900, 1400x600

### Screenshots
- `exp_0_baseline.png` - 900px viewport
- `exp_0_baseline_small.png` - 600px viewport
- `exp_0_baseline_full.png` - 900px full page
- `exp_0_baseline_small_full.png` - 600px full page

### Observations

**At 900px viewport:**
- Footer visible at bottom of viewport ✓
- Code editor shows ~31 lines (up to Section 7)
- Full page = viewport page (no overflow)
- Radio buttons styled as compact inline options

**At 600px viewport:**
- Footer still visible at bottom ✓
- Code editor compressed to ~13 lines (up to Section 2-3)
- Code component dynamically shrinks to fit available space
- Full page = viewport page (no overflow)

### Key Finding
For Code components (gr.Code), Gradio's defaults work well because Code has built-in scrolling. The `lines=25` parameter is a hint, not strict - components shrink dynamically.

---

## Experiment 1: Flex Viewport CSS with Code Component

**Date**: 2026-01-24
**CSS Applied**: CSS_FLEX_VIEWPORT (from Brain app)
**Content**: Long markdown in Code component
**Viewports Tested**: 1400x900, 1400x600

### Screenshots
- `exp_1_flex_viewport.png` - 900px viewport
- `exp_1_flex_small.png` - 600px viewport

### Observations
- Nearly identical to baseline for Code components
- Code components have built-in scrolling so CSS provides minimal benefit

### Key Finding
CSS_FLEX_VIEWPORT is **not needed** for layouts using only Code components.

---

## Experiment 2: HTML Component - The Critical Test

**Date**: 2026-01-24
**Content**: 49 paragraphs of Lorem Ipsum in HTML component (no built-in scroll)

### Screenshots
- `exp_2_html_baseline.png` - Baseline, viewport only
- `exp_2_html_baseline_full.png` - Baseline, FULL PAGE (very tall!)
- `exp_2_html_long.png` - With CSS, viewport only
- `exp_2_html_long_full.png` - With CSS, full page

### Without CSS (Baseline)
**Screenshot**: `exp_2_html_baseline.png` and `exp_2_html_baseline_full.png`

**Observations:**
- Content visible: Paragraphs 1-12 in viewport
- Footer: **NOT VISIBLE** (pushed below viewport)
- Full page: **VERY TALL** - all 49 paragraphs render, footer at very bottom
- User must scroll the entire page to see footer
- Radio buttons: Compact inline style

**Critique:**
| Issue | Severity | Description |
|-------|----------|-------------|
| Footer hidden | **Critical** | User cannot see footer without scrolling way down |
| Page-level scroll | Major | Entire page scrolls instead of just content area |
| No content containment | Major | HTML content pushes layout rather than being contained |

### With CSS_FLEX_VIEWPORT
**Screenshot**: `exp_2_html_long.png` and `exp_2_html_long_full.png`

**Observations:**
- Content visible: Paragraphs 1-9 in viewport
- Footer: **VISIBLE** ✓
- Full page: **SAME AS VIEWPORT** (content contained)
- HTML content scrolls within its container
- Radio buttons: Card-style buttons

**Critique:**
| Issue | Severity | Description |
|-------|----------|-------------|
| Radio button bloat | Minor | Card-style takes more vertical space than needed |
| Right column alignment | Minor | Side panel doesn't extend full height |

### Key Finding
**CSS_FLEX_VIEWPORT is ESSENTIAL for HTML components** that don't have built-in scrolling. Without it:
- Footer gets pushed off screen
- Page becomes very tall
- Poor UX requiring page-level scrolling

---

## Common Issues Catalog

### Issue: Footer Pushed Below Viewport
**Symptoms**: Footer not visible without scrolling the whole page
**Root Cause**: HTML content not contained, pushes page height
**Fix Pattern**: CSS_FLEX_VIEWPORT with overflow rules
**Severity**: Critical

### Issue: Radio Buttons as Cards vs Inline
**Symptoms**: Radio choices displayed as tall button-like cards
**Root Cause**: Seems related to CSS presence (investigating)
**Fix Pattern**: Unknown - may need explicit styling
**Severity**: Minor

### Issue: Column Height Mismatch
**Symptoms**: Right column shorter than left, uneven appearance
**Root Cause**: Columns not forced to equal height
**Fix Pattern**: Add `height: 100%` to column containers
**Severity**: Minor

### Issue: Component Not Filling Available Space
**Symptoms**: Component has fixed height, whitespace below
**Root Cause**: Missing flex-grow cascade
**Fix Pattern**: `flex-grow: 1` on intermediate containers
**Severity**: Minor

---

## CSS Pattern Reference

### CSS_FLEX_VIEWPORT (Recommended for HTML content)
```css
.gradio-container {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.gradio-container .main,
.gradio-container .wrap,
.gradio-container .contain {
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.gradio-container .contain > div {
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.main-content-row {
    flex-grow: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
}

.main-content-row > * {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

.content-tabs {
    height: 100% !important;
    display: flex;
    flex-direction: column;
}
.content-tabs .tabitem {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.content-tabs .tabitem > div {
    flex-grow: 1;
    overflow-y: auto;
    height: 100% !important;
    max-height: none !important;
}

footer, .app-footer {
    flex-shrink: 0 !important;
    display: block !important;
}
```

---

## Key Learnings

1. **CSS_FLEX_VIEWPORT is essential for HTML components** - Without it, long HTML content pushes footer off screen

2. **Code components are self-contained** - They handle their own scrolling, so CSS is less critical

3. **Test with HTML content to reveal layout issues** - Code components mask problems

4. **Full-page screenshots reveal true behavior** - Compare full-page to viewport to see if content overflows

5. **The `lines` parameter on Code is advisory** - Components resize dynamically based on available space

6. **Radio button styling varies** - With/without CSS seems to affect Radio appearance (needs investigation)

---

## TODO: Further Experiments

- [ ] Investigate Radio button styling difference
- [ ] Test with even smaller viewport (400px)
- [ ] Test nested tabs
- [ ] Test 3-column layout
- [ ] Create minimal reproduction of each issue
- [ ] Document fix for each issue