https://sonarly.com/issue/35135?type=bug
Users cannot scroll through long RICH_TEXT field content when viewing it in the side panel, making portions of the text inaccessible.
Fix: ## Summary
Added a two-container flex layout to `SidePanelEditRichTextPage` to enable vertical scrolling for long rich text content. The fix follows the exact CSS pattern used in `SidePanelComposeEmailPage` and other side panel pages.
## Root cause
The original `StyledContainer` had no height constraint, so it grew to fit all content. This prevented the parent `StyledSidePanelContent`'s `overflow-y: auto` from ever triggering because there was no overflow — the container just kept expanding.
## The fix
Split the single container into two styled components:
1. **`StyledContainer`** — outer wrapper with `height: 100%`, `display: flex`, `flex-direction: column`
- Takes the full height from its parent (`StyledSidePanelContent` which has `flex: 1`)
- Establishes the flex container for the scrollable content
2. **`StyledContent`** — inner scrollable area with `flex: 1`, `overflow-y: auto`
- Fills available vertical space via `flex: 1`
- Enables vertical scrolling when the BlockNote editor content exceeds the constrained height
- Preserves the original padding and margin values for consistent spacing
This is the standard pattern for scrollable flex containers used throughout the side panel (see `SidePanelComposeEmailPage.tsx` lines 20-31 for identical structure).
## Why this works
CSS `overflow-y: auto` only triggers when:
1. The container has a constrained height (✓ via flex: 1 on StyledContent inside height: 100% parent)
2. The content exceeds that height (✓ BlockNote editor with long text grows beyond constrained height)
The original code failed condition (1) because StyledContainer had no height constraint and just grew infinitely.
## Testing
No automated tests exist for this component. The fix should be manually tested by:
1. Opening a rich text field in the side panel (Notes, Tasks, or custom rich text fields)
2. Adding content that exceeds the viewport height (e.g., 20+ paragraphs)
3. Verifying vertical scrollbar appears and content is accessible via scroll
Sonarly Claude Code
197f8f48d5