Compare commits

...
Author SHA1 Message Date
Sonarly Claude Code 74bac8aa86 fix(side-panel): remove redundant outer scroll container causing double scrollbar
https://sonarly.com/issue/36442?type=bug

The side panel list renders two independent scrollbars — an outer one from `StyledSidePanelContent` (`overflow-y: auto` in `SidePanelRouter.tsx`) and an inner one from `ScrollWrapper` (`overflow-y: overlay` in `SidePanelList.tsx`). Users must scroll twice to reach the bottom of the list.

Fix: Removed the `StyledSidePanelList` wrapper div (the only CSS property it carried was `overflow-y: hidden`) from `SidePanelList.tsx` and replaced it with a React fragment.

**Why this fixes the double scrollbar:**

The DOM structure before the fix was:
```
StyledSidePanelContent   (overflow-y: auto)   ← scroll container #1 (outer)
  └─ StyledSidePanelList  (overflow-y: hidden, no height)
       └─ ScrollWrapper   (overflow-y: overlay, height: 100%)   ← scroll container #2 (inner)
            └─ StyledInnerList  (max-height: calc(100dvh - ...))
```

`StyledSidePanelList` had no explicit `height` or `max-height`, so it grew to match its full content height. That made `StyledSidePanelContent` see content taller than its own flex height, triggering its `overflow-y: auto` scrollbar — adding a second scrollbar on top of the `ScrollWrapper`'s own scrollbar.

After removing `StyledSidePanelList`:
```
StyledSidePanelContent   (overflow-y: auto)
  └─ ScrollWrapper   (overflow-y: overlay, height: 100%)   ← single scroll container
       └─ StyledInnerList  (max-height: calc(100dvh - ...))
```

`ScrollWrapper` has `height: 100%`, so it fills `StyledSidePanelContent` exactly without overflowing it. The outer container no longer activates its scrollbar, leaving only the `ScrollWrapper`'s single scrollbar.

**File changed:** `packages/twenty-front/src/modules/side-panel/components/SidePanelList.tsx`
- Deleted `StyledSidePanelList` styled component (lines 38–40 in original)
- Replaced `<StyledSidePanelList>...</StyledSidePanelList>` with `<>...</>`
2026-05-09 19:06:39 +00:00
@@ -35,10 +35,6 @@ const StyledInnerList = styled.div`
}
`;
const StyledSidePanelList = styled.div`
overflow-y: hidden;
`;
const StyledEmpty = styled.div`
align-items: center;
color: ${themeCssVariables.font.color.light};
@@ -61,7 +57,7 @@ export const SidePanelList = ({
);
return (
<StyledSidePanelList>
<>
<SidePanelDefaultSelectionEffect selectableItemIds={selectableItemIds} />
<ScrollWrapper componentInstanceId={`scroll-wrapper-side-panel`}>
<StyledInnerList>
@@ -80,6 +76,6 @@ export const SidePanelList = ({
</SelectableList>
</StyledInnerList>
</ScrollWrapper>
</StyledSidePanelList>
</>
);
};