From 2dcf53619f568d397eae272fcd20dcbe2a06bf10 Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Wed, 15 Jul 2026 18:43:37 +0200
Subject: [PATCH] fix(front): keep kanban header columns full-width when board
 overflows viewport (#22926)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem

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

After
<img width="1340" height="542" alt="Capture d’écran 2026-07-15 à 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. -->
---
 .../drag-and-drop/components/DragDropColumnSortableCell.tsx      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/twenty-front/src/modules/ui/utilities/drag-and-drop/components/DragDropColumnSortableCell.tsx b/packages/twenty-front/src/modules/ui/utilities/drag-and-drop/components/DragDropColumnSortableCell.tsx
index b29e559b90..cfc7e9b009 100644
--- a/packages/twenty-front/src/modules/ui/utilities/drag-and-drop/components/DragDropColumnSortableCell.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/drag-and-drop/components/DragDropColumnSortableCell.tsx
@@ -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')};