fix(playground): fold the navbar on a phone, and stop the sideways scroll

[agahkarakuzu]

Mobile only. Desktop layout is unchanged, verified at 900px and 1280px.

• Navbar at ≤700px: the external links and Cite fold into a hamburger panel. Same elements, not copies: the wrapper is display: contents on a wide screen, so each link keeps one home. Data/Simulate and light/dark each collapse to the single button their two halves already agreed on; the status line ellipsises.
• The horizontal page scroll is gone. .recipe-head (logo + Form/YAML + the narrow-screen-only Show/Hide) measured 385px against 362px of column, which widened the single grid track and pushed every card past the viewport edge. .frame-row did the same at ≤380px. Both rows now wrap, so neither can demand more than its widest item at any width.
• Added Lucide's menu glyph and re-pinned vendor/MANIFEST.json.

Verified in headless Chrome (SwiftShader, so the app fully initialises) at 320/360/390/430/700/900/1280: scrollWidth == clientWidth at every width, and the panel opens and closes on the button, an outside click, Escape, and picking a row.

https://claude.ai/code/session_014Az5n7m3L8jXp4a1Xfq8hB

Summary by CodeRabbit

• New Features
  • Added a responsive mobile navigation menu with hamburger controls.
  • Navigation links now include visible labels alongside icons.
  • Added automatic menu closing when selecting a link, clicking outside, or pressing Escape.
  • Improved narrow-screen layouts with wrapping controls and a smaller panel logo.
• Style
  • Extended glass-surface styling to the mobile navigation panel.
  • Simplified mobile mode and icon-toggle displays for improved usability.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 8173cbe8-c968-4e70-9ba5-dd9f9f740be4

📥 Commits

Reviewing files that changed from the base of the PR and between 7f2f574 and 8dcf7f7.

📒 Files selected for processing (5)

• docs/playground/app.css
• docs/playground/app.js
• docs/playground/index.html
• docs/playground/vendor/MANIFEST.json
• docs/playground/vendor/icons.js

---

📝 Walkthrough

Walkthrough

The playground navbar now groups secondary links and citation controls, adds a responsive mobile menu, and wires hamburger interaction. Narrow layouts also wrap selected controls and use a smaller panel logo. The vendored icon catalog includes the menu icon with an updated integrity hash.

Changes

Responsive navbar

Layer / File(s)	Summary
Navbar structure and icon support docs/playground/index.html, docs/playground/vendor/icons.js, docs/playground/vendor/MANIFEST.json	The navbar groups secondary controls, adds text labels and an accessible hamburger button, and adds the menu icon with its updated integrity hash.
Responsive navbar styling docs/playground/app.css	Desktop and narrow-screen styles control navbar grouping, menu layout, wrapping, control visibility, logo sizing, and glass-surface styling.
Navbar menu interaction docs/playground/app.js	wireNavbarMenu toggles the menu, updates aria-expanded, and closes the menu on link selection, outside clicks, or Escape. Startup invokes the wiring function.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant navbar-burger
  participant wireNavbarMenu
  participant navbar-more
  User->>navbar-burger: Click hamburger
  navbar-burger->>wireNavbarMenu: Toggle menu
  wireNavbarMenu->>navbar-more: Update open state
  wireNavbarMenu->>navbar-burger: Update aria-expanded
  User->>navbar-more: Select navigation link
  navbar-more->>wireNavbarMenu: Trigger close handling
  wireNavbarMenu->>navbar-more: Close menu

Loading

🚥 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 clearly summarizes the main mobile navbar and horizontal scrolling fixes in the changeset.
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.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/playground-mobile-navbar

---

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.}