Skip to content

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

Merged
Simplereally merged 1 commit intomainfrom
fix/mobile-sidebar-ux
Jan 17, 2026
Merged

feat: Add mobile sidebar toggle buttons, safe-area padding, and a mob…#21
Simplereally merged 1 commit intomainfrom
fix/mobile-sidebar-ux

Conversation

@Simplereally
Copy link
Copy Markdown
Owner

@Simplereally Simplereally commented Jan 17, 2026

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
Copy link
Copy Markdown
Contributor

vercel Bot commented Jan 17, 2026

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

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

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jan 17, 2026

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

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

@Simplereally Simplereally marked this pull request as ready for review January 17, 2026 15:41
@Simplereally Simplereally merged commit 04a2c75 into main Jan 17, 2026
2 of 3 checks passed
@Simplereally Simplereally deleted the fix/mobile-sidebar-ux branch January 17, 2026 15:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant