fix: enable scrolling for long rich text content in side panel

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
This commit is contained in:
Sonarly Claude Code
2026-05-06 01:09:54 +00:00
parent 2a97e77303
commit 197f8f48d5
@@ -22,8 +22,16 @@ const RichTextFieldEditor = lazy(() =>
);
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
height: 100%;
`;
const StyledContent = styled.div`
box-sizing: border-box;
flex: 1;
margin: ${themeCssVariables.spacing[4]} -8px;
overflow-y: auto;
padding-inline: 44px 0px;
width: 100%;
`;
@@ -56,20 +64,22 @@ export const SidePanelEditRichTextPage = () => {
return (
<StyledContainer>
<Suspense fallback={<LoadingSkeleton />}>
{isActivityObject(objectNameSingular) ? (
<ActivityRichTextEditor
activityId={recordId}
activityObjectNameSingular={objectNameSingular}
/>
) : (
<RichTextFieldEditor
recordId={recordId}
objectNameSingular={objectNameSingular}
fieldName={fieldName}
/>
)}
</Suspense>
<StyledContent>
<Suspense fallback={<LoadingSkeleton />}>
{isActivityObject(objectNameSingular) ? (
<ActivityRichTextEditor
activityId={recordId}
activityObjectNameSingular={objectNameSingular}
/>
) : (
<RichTextFieldEditor
recordId={recordId}
objectNameSingular={objectNameSingular}
fieldName={fieldName}
/>
)}
</Suspense>
</StyledContent>
</StyledContainer>
);
};