fix(front): keep kanban header columns full-width when board overflows viewport (#22926)

## Problem

Before
<img width="1340" height="542" alt="Capture d’écran 2026-07-15 à 18 26
22"
src="https://github.com/user-attachments/assets/472dfe13-336a-43c7-8986-6cdcb04e5217"
/>

After
<img width="1340" height="542" alt="Capture d’écran 2026-07-15 à 18 26
12"
src="https://github.com/user-attachments/assets/e393a3fa-2245-42cc-b965-f16f3feaeff6"
/>

The record board (Kanban) header breaks when the screen is narrower than
the total column width. The stage header columns squish together to fit
the viewport while the cards below keep their fixed 220px width and
scroll horizontally, so the header labels no longer line up with their
columns.

Regression from #22323.

## Cause

#22323 wrapped each column header in `DragDropColumnSortableCell`. In
`fill` mode its `StyledSortableRoot` uses `min-width: 0` with the
default `flex-shrink: 1`, so the header cells collapse below their
column width when the board is wider than the viewport, instead of
overflowing into horizontal scroll like the body.

## Fix

Pin `flex-shrink: 0` in `fill` mode so header cells keep their column
width and overflow in step with the body. `fill` is board-only; the
record table header uses non-fill mode and is unaffected.

## Testing

Opportunities → "By Stage" Kanban, narrow the window below the total
column width: header stays aligned with the cards and scrolls
horizontally with them.

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22926?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

This commit is contained in:

Thomas Trompette

2026-07-15 18:43:37 +02:00

committed by

GitHub

parent dd9763a7a0

commit 2dcf53619f

1 changed files with 1 additions and 0 deletions

									
										packages/twenty-front/src/modules/ui/utilities/drag-and-drop/components/DragDropColumnSortableCell.tsx
									
		+1
		
												View File
												
				@@ -21,6 +21,7 @@ const SORTABLE_TRANSITION = {

				const StyledSortableRoot = styled.div<{ $fill?: boolean }>`

				  display: ${({ $fill }) => ($fill ? 'flex' : 'block')};

				  flex-shrink: ${({ $fill }) => ($fill ? 0 : 'initial')};

				  height: ${({ $fill }) => ($fill ? '100%' : 'auto')};

				  min-height: 0;

				  min-width: ${({ $fill }) => ($fill ? '0' : 'auto')};