feat: Add mobile sidebar toggle buttons, safe-area padding, and a mob…

[Simplereally]

Summary by CodeRabbit

Release Notes

• New Features

  • Added mobile toggle buttons for easier sidebar navigation on mobile devices.
  • Improved layout handling for safe areas on devices with notches or home indicators.

• Documentation

  • Added mobile optimization guidelines for future enhancements.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
bloomstudio	Building	Preview, Comment	Jan 17, 2026 3:41pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

The pull request enhances the studio layout with mobile-responsive UI improvements, including a new MobileMenuButton component for sidebar toggling, updated sidebar mocks with the useSidebar hook, refined sidebar opacity rules, and mobile trigger placements. Documentation outlines further mobile optimization recommendations.

Changes

Cohort / File(s)	Summary
Sidebar Mock & Hook Updates components/studio/layout/studio-layout.test.tsx	SidebarRail mock now accepts className and children props instead of remaining parameterless. New useSidebar hook mock exported returning toggleSidebar function, open state (true), and isMobile flag (false). New test case validates mobile toggle buttons using role-based queries and md:hidden class filtering.
Layout Component Mobile Enhancements components/studio/layout/studio-layout.tsx	New MobileMenuButton component for sidebar toggling using PanelLeft/PanelRight icons. Left and right rails updated with !flex enforcement and opacity rules (opacity-100 default on small screens, md:opacity-0 with hover visibility). Mobile triggers added: left trigger always present, right trigger conditional on gallery. Right content wrapped in additional SidebarInset.
Shell Styling Adjustment components/studio/layout/studio-shell.tsx	Bottom bar container padding increased with pb-[calc(0.375rem+env(safe-area-inset-bottom))] to accommodate safe-area insets on mobile devices.
Mobile Optimization Documentation todo/studio-optimizations.md	New file documenting mobile experience optimization tasks: input zoom prevention via 16px minimum font size (md:text-sm text-base) and overscroll behavior control recommendations using overscroll-y-none utility.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A sidebar that toggles with mobile delight,
PanelLeft and PanelRight dancing in sight,
With opacity rules and safe-area care,
The studio layout blooms everywhere!
Hop forward to smaller screens with glee, 🎨

✨ Finishing touches

• 📝 Generate docstrings

---

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