fix(desktop): prevent sidebar overflow when empty

[saddlepaddle]

Summary

• Fixed sidebar showing scrollbar when empty due to incorrect height calculation
• Changed inner content wrapper from h-full to flex-1 min-h-0 so it fills remaining space instead of 100% + header height

Root Cause

In ModeContent.tsx, the structure was:

<div className="overflow-y-auto h-full">
  <ModeHeader />           // Takes 8px (tabs) or ~40px (changes)
  <div className="h-full"> // ❌ 100% of parent

Total height = header + 100% > 100% → overflow

Fix

Use flexbox to properly distribute space:

<div className="overflow-y-auto flex flex-col h-full">
  <ModeHeader />
  <div className="flex-1 min-h-0"> // ✅ fills remaining space

Test plan

• Lint passes
• Typecheck passes
• Verify sidebar has no scroll when empty
• Verify sidebar scrolls correctly when content overflows

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style
  • Refined sidebar layout structure and improved flex positioning for better content display and alignment in the workspace view.

_{✏️ 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	Preview	Comments	Updated (UTC)
website	Ready	Preview	Comment	Nov 28, 2025 7:04am

[coderabbitai]

Walkthrough

Adds an isActive boolean property to the ModeContentProps interface and updates the flex layout of the container and content wrapper by modifying Tailwind utility classes to improve layout behavior.

Changes

Cohort / File(s)	Change Summary
ModeContent component props and layout apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/ModeContent.tsx	Added isActive: boolean property to ModeContentProps interface. Updated outer container className from "overflow-y-auto h-full" to "overflow-y-auto flex flex-col h-full" and content wrapper className from "px-1 h-full" to "px-1 flex-1 min-h-0" to enhance flex layout behavior.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3–5 minutes

• The change is confined to a single file with straightforward utility class updates and a simple prop addition
• Verify that the isActive prop is utilized where intended throughout the component tree
• Confirm Tailwind classes (flex, flex-col, flex-1, min-h-0) achieve the intended layout without breaking existing scroll behavior

Possibly related PRs

• carousel #74: Modifies the same ModeContent component with layout adjustments and adds the isActive prop introduction
• tabs interaction #111: Updates the same file with container class modifications affecting layout structure

Poem

🐰 A carousel's grace, with flex so divine,
Active states glow, their layouts align,
Props spring anew, like clover in spring,
Container flex dance—what joy it does bring! 🌟

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely summarizes the main fix: preventing sidebar overflow when empty by addressing the height calculation issue.
Description check	✅ Passed	The PR description provides detailed context including root cause, fix implementation, and test plan, though it deviates from the template structure with a custom format.

✨ 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 crimson-glacier-49

---

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: 0

🧹 Nitpick comments (1)

apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/ModeContent.tsx (1)

5-12: Unused isActive prop in ModeContentProps

ModeContentProps declares isActive, but ModeContent currently only destructures { mode, children } and never uses isActive. If you don’t plan to use this prop for conditional rendering or styling, consider removing it from the interface to avoid type-level noise. If it is intended for future use, keeping it is fine but maybe add a brief TODO in the caller/consumer instead of here.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 09274bb and 5da3e47.

📒 Files selected for processing (1)

• apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/ModeContent.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (6)

apps/desktop/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (apps/desktop/AGENTS.md)

For Electron interprocess communication, ALWAYS use tRPC as defined in src/lib/trpc

Files:

• apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/ModeContent.tsx

apps/desktop/**/*.{ts,tsx}

📄 CodeRabbit inference engine (apps/desktop/AGENTS.md)

apps/desktop/**/*.{ts,tsx}: Please use alias as defined in tsconfig.json when possible
Prefer zustand for state management if it makes sense. Do not use effect unless absolutely necessary

Files:

• apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/ModeContent.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Avoid using any type - use explicit types instead for type safety
Use camelCase for variable and function names following existing codebase patterns
Keep diffs minimal with targeted edits only - avoid unnecessary changes when making modifications
Follow existing patterns and match the codebase style when writing new code

Files:

• apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/ModeContent.tsx

**/components/**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

**/components/**/*.tsx: Create one folder per component with structure: ComponentName/ComponentName.tsx + index.ts for barrel export
Co-locate tests next to the component file they test (e.g., ComponentName.test.tsx)
Co-locate dependencies (utils, hooks, constants, config, stories) next to the file using them
Use nested components/ subdirectory within a parent component only if a sub-component is used 2+ times within that parent; otherwise keep it in the parent's components/ folder
One component per file - avoid multi-component files

Files:

• apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/ModeContent.tsx

apps/desktop/src/renderer/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Never import Node.js modules (fs, path, os, net, etc.) in renderer process code - browser environment only

Files:

• apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/ModeContent.tsx

apps/desktop/src/renderer/**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

Call IPC methods using window.ipcRenderer.invoke() with object parameters - TypeScript will infer the exact response type automatically

Files:

• apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/ModeContent.tsx

🧬 Code graph analysis (1)

apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/ModeContent.tsx (1)

apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/ModeHeader.tsx (1)

• ModeHeader (8-19)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Build

🔇 Additional comments (1)

apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/ModeContent.tsx (1)

14-21: Flex layout + min-h-0 change correctly addresses the overflow issue

Switching the scroll container to overflow-y-auto flex flex-col h-full and the content wrapper to px-1 flex-1 min-h-0 is the usual flexbox pattern to prevent headers from inflating the total height and causing phantom scrollbars. This should let the header take its intrinsic height and the content fill only the remaining space.

Please just manually verify the two behaviors from the test plan:

• No scrollbar when the mode content is empty.
• Scrollbar appears and works correctly when content exceeds the available height.