From 197f8f48d5ab63eac80f4bbf75a2f551f76caf36 Mon Sep 17 00:00:00 2001
From: Sonarly Claude Code <claude-code@sonarly.com>
Date: Wed, 6 May 2026 01:09:54 +0000
Subject: [PATCH] fix: enable scrolling for long rich text content in side
 panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../components/SidePanelEditRichTextPage.tsx  | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/packages/twenty-front/src/modules/side-panel/pages/rich-text-page/components/SidePanelEditRichTextPage.tsx b/packages/twenty-front/src/modules/side-panel/pages/rich-text-page/components/SidePanelEditRichTextPage.tsx
index c7de651251f..be8c96f5e7c 100644
--- a/packages/twenty-front/src/modules/side-panel/pages/rich-text-page/components/SidePanelEditRichTextPage.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/rich-text-page/components/SidePanelEditRichTextPage.tsx
@@ -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>
   );
 };