Fix viewer nav overlap and mobile shell layout

[nightskat]

Summary

• separate the viewer chrome from scrollable tab content so tab bodies cannot visually overrun the header/nav shell
• add stacking isolation for the later tabs that were reproducing the overlap most often
• make the viewer header and tab bar wrap cleanly on narrower viewports instead of collapsing into a single overflowing row
• improve mobile graph/layout behavior so the shell stays usable on small screens

Why

On the viewer, tabs from roughly Sessions onward could render over the navigation area: the nav became invisible while still remaining clickable underneath. The shell also behaved poorly on narrower widths because the header/tab row had no real responsive fallback.

Notes

• change is limited to
• this is based on reproducing the overlap in the installed viewer and moving the shell into its own non-scrolling container
• I did not add automated tests because this viewer is a single-file HTML/CSS/JS surface and the fix is structural/layout-only

Summary by CodeRabbit

• Style

  • Reworked overall app layout and stacking to improve visual layering and scrolling.
  • Enhanced header, tab bar, and footer alignment, spacing, and active/tab behaviour across breakpoints.
  • Improved responsive and mobile experiences with adjusted padding, grid behavior, and content reflow.

• Refactor

  • Reorganized top-level structure so shell and main content are separated for clearer layout management.

[vercel]

@nightskat 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: 18fcf9d5-c0f3-43ae-959a-8d4ee883bf73

📥 Commits

Reviewing files that changed from the base of the PR and between 67833c6 and a4887d8.

📒 Files selected for processing (1)

• src/viewer/index.html

🚧 Files skipped from review as they are similar to previous changes (1)

• src/viewer/index.html

---

📝 Walkthrough

Walkthrough

The viewer's single HTML file undergoes a comprehensive layout reorganization: new CSS container classes (.app-shell and .app-main) establish the top-level structure, paint isolation and containment rules enhance rendering efficiency, header and tab navigation styling is refined for wrapping and layering, responsive breakpoints are added and extended for tablet and mobile, and the DOM is restructured to wrap the header and shell content accordingly while preserving all existing view IDs and element wiring.

Changes

Viewer Layout Restructuring

Layer / File(s)	Summary
Layout container refactoring and paint isolation src/viewer/index.html	Introduces isolation: isolate for header stacking control, new .app-shell and .app-main container classes, refactored .view styling, and contain: layout paint rules on specific view ID containers.
Header and tab navigation styling refinements src/viewer/index.html	Updates .app-header, .brand, .header-right, .tab-bar, and #flag-banners styling to support wrapping, flex constraints, positioning context, and z-index layering.
Responsive layout at tablet and mobile breakpoints src/viewer/index.html	New @media (max-width: 980px) block for tablet layout; extended @media (max-width: 768px) rules for mobile: grid-based tab bar, stacked graph/sidebar, and adjusted spacing and visibility.
HTML structure rebuild for new container system src/viewer/index.html	Wraps header, tab bar, and flag banner in .app-shell; moves views and footer under <main class="app-main">; preserves all view IDs and data-tab attributes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A shell holds the header high,
App-main spreads its views so wide,
Paint contained, layers align,
Tablets, phones—they all look fine,
Responsive magic, line by line! ✨

🚥 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 main objectives: fixing viewer navigation overlap and mobile shell layout, which are the core problems the PR resolves.
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

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/viewer/index.html`:
- Around line 202-210: The active view currently fills the entire .app-main
(overflow: hidden on .app-main + .view {height: 100%}) which pushes the footer
off-screen; change the sizing model so the view participates in flex layout
instead of forcing full height: remove or replace .view { height: 100% } with a
flex rule (e.g., .view { flex: 1 1 auto; height: auto; overflow-y: auto; })
and/or remove overflow: hidden from .app-main so the footer can be reached;
update .view.active to keep display:block and scrolling via overflow-y instead
of full-height takeover.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: feb9669e-abf8-4f76-8a11-238156a4432b

📥 Commits

Reviewing files that changed from the base of the PR and between a9c3a59 and 67833c6.

📒 Files selected for processing (1)

• src/viewer/index.html