🐛 fix: sidebar scroll on mobile dynamic viewport

[t0ng7u]

Use dynamic viewport height to prevent sidebar scroll lock in mobile browsers Harden sidebar scroll container with min-height and momentum scrolling

Summary by CodeRabbit

• Style
  • Enhanced layout styling with improved viewport height handling for better responsiveness
  • Improved scrolling behavior in sidebar and code block areas
  • Added touch scrolling support for enhanced mobile experience

[coderabbitai]

Walkthrough

Layout component height constraints migrate from inline styles to CSS classes. Dynamic viewport height calculations support both standard and dynamic viewport units. Overflow and touch-scrolling behavior refined for sidebar and code block elements.

Changes

Cohort / File(s)	Summary
Component Styling Hooks web/src/components/layout/PageLayout.jsx	Added className props (app-layout, app-sider) to Layout and Sider elements; removed inline height constraints to delegate sizing to CSS.
Layout and Overflow Refinements web/src/index.css	Added .app-layout and .app-sider CSS rules with dual viewport height properties (100vh + 100dvh); refined .sidebar-container and code element overflow handling with min-height constraints and webkit touch-scrolling support.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 Hop, hop, heights no longer bound,
Classes reign where styles were found,
Viewport dance in CSS flows,
Scrolling smooth as carrot rows! 🥕✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main objective: fixing sidebar scroll issues on mobile by using dynamic viewport height (dvh), which aligns with the CSS changes adding dvh properties and the layout refinements.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/sidebar-scroll-dvh

---

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