Fix MainNavigation scrollbar overlapping sidebar icons

[Copilot]

When the navigation sidebar contains enough items to overflow, the scrollbar renders on top of the content instead of reserving space, causing it to overlap sidebar icons.

Changes

• MainNavigation.styles.ts: Added overflow-y: auto, scrollbar-width: none, and &::-webkit-scrollbar { display: none } to getSharedStyles(). The sidebar remains fully scrollable when content overflows, but the scrollbar track is hidden on all browsers (Firefox and WebKit/Chromium), preventing any space reservation or icon overlap in both the collapsed (60px) and expanded states.

• Menu.stories.tsx: Added MenuWithManyItems story with 20+ items across four groups (Content, Communication, Structure, Settings) to make the scrolling behavior visible and verifiable in Storybook.

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[thomasdax98]

@copilot The issue persists:

try again

[Copilot]

@copilot The issue persists:
<img width="1618" height="630" alt="Bildschirmfoto 2026-03-13 um 09 21 26" src="https://github.com/user-attachments/assets/85b63a9a-4181-42a9-8e75-ae7b...

The root cause was scrollbar-gutter: stable being applied unconditionally to both the expanded (300px) and collapsed (60px) states. In the 60px collapsed sidebar, it permanently reserved ~17px for the scrollbar gutter inside the fixed-width container, pushing icons left and showing a persistent gray gutter even when no scrollbar was needed.

Fixed in 56cea57: overflow-y: auto + scrollbar-gutter: stable are now only applied when the permanent drawer is open (300px wide). The collapsed icon-only sidebar no longer reserves scrollbar space. The temporary (overlay) drawer always gets it since it's only visible when fully expanded.

[thomasdax98]

@copilot The problem persists. Try an approach similar to this:

.sidebar {
overflow-y: auto;
scrollbar-width: none;
}

.sidebar::-webkit-scrollbar {
display: none;
}

[Copilot]

@copilot The problem persists. Try an approach similar to this:

.sidebar {
...

Applied in db28ca9. getSharedStyles() now sets overflow-y: auto, scrollbar-width: none (Firefox), and &::-webkit-scrollbar { display: none } (WebKit/Chromium). The sidebar scrolls when content overflows but the scrollbar track is invisible, so no space is reserved and icons are never pushed out of alignment.