fix(viewer): prevent tab bar crush and fix graph canvas overflow

[nagarjunr]

Summary

Two CSS layout bugs in the single-file viewer SPA (src/viewer/index.html):

Bug 1 — Tab bar compressed to ~8px (invisible)

Root cause: .tab-bar has overflow-x: auto for horizontal scrolling on small screens. The CSS overflow interaction rule means setting overflow-x to anything other than visible also forces overflow-y: auto. This zeroes the flex item's minimum height floor. Combined with the default flex-shrink: 1 on all structural elements, the flexbox algorithm shrinks the tab bar to near-zero when content is tall.

Fix: Add flex-shrink: 0 to all structural chrome elements (.app-header, .tab-bar, .flag-banners, .viewer-footer). Only the content view (.view.active, which already has min-height: 0) should participate in shrinking.

Bug 2 — Graph canvas overflows its container (~235px)

Root cause: .graph-container used height: calc(100vh - 130px) which assumed 130px of fixed chrome above it. Since the flag-banners section was added the actual chrome is ~194px, making the canvas 64-235px taller than the visible view area. Users see only ~62% of the graph canvas.

Fix: Add #view-graph { padding: 0; overflow: hidden } and change .graph-container to height: 100%, removing the stale calc() and the margin: -24px padding-negation hack. Since the view is a flex item with flex-grow: 1 the height resolves correctly against the available viewport space.

Test plan

• Tab bar is fully visible at all viewport heights
• Switching tabs no longer crushes the tab bar
• Expanding the Feature Flags banner does not overlap the tab bar
• Graph canvas fills its container without overflow scrollbar
• Graph interaction (pan/zoom/drag) works within the full visible area
• All other tab views scroll normally within their content area

Summary by CodeRabbit

• Style
  • Improved viewer layout spacing and alignment for better visual consistency
  • Enhanced graph tab display sizing to better utilize available space

[vercel]

Someone is attempting to deploy a commit to the rohitg00's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 699c915a-3201-4ae9-b214-9aaa33591669

📥 Commits

Reviewing files that changed from the base of the PR and between 94fc119 and a3f13f4.

📒 Files selected for processing (1)

• src/viewer/index.html

---

📝 Walkthrough

Walkthrough

CSS layout improvements in the viewer HTML file to fix flex container sizing behavior. The header, tab bar, feature-flag banner, and footer now use flex-shrink: 0 to prevent unintended resizing, while the graph container adopts height: 100% for better flex alignment.

Changes

Cohort / File(s)	Summary
Viewer Layout Styling src/viewer/index.html	Added flex-shrink: 0 to header, tab bar, feature-flag banner, and footer to maintain fixed dimensions in flex layout. Added #view-graph rule to remove padding and hide overflow. Changed graph container sizing from viewport-height/margin calculation to height: 100% for improved flex alignment.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A layout refined, with flex now aligned,
Shrink set to zero, no squishing designed,
The graph stands tall at one hundred percent,
A CSS fix, perfectly spent! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly addresses the two main CSS layout fixes: preventing tab bar compression and correcting graph canvas overflow—matching the PR's core objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[rohitg00]

Reviewed — clean CSS layout fix. The diagnoses are right:

• Tab bar overflow without flex-shrink: 0 was crushing into the content area when sessions accumulate.
• Graph canvas using calc(100vh - 130px) with negative margins was a brittle hack; switching to height: 100% inside the #view-graph container makes it actually responsive.
• The footer + flag-banner flex-shrink: 0 additions prevent the same crush pattern in those slots.

CSS-only, no runtime impact, no test coverage needed. Approving for merge — holding for @rohitg00 to push the button.

If you have screenshots of before/after the tab-bar fix specifically, mind dropping them in the PR body? Helpful for the CHANGELOG entry. Not blocking.