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:
+24
-14
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user