From 34a2037b651219e3c0a3716f3671a46e288f719c Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Fri, 19 Jun 2026 15:39:22 +0200
Subject: [PATCH] fix(front): keep record table footer visible below
 information banner (#21852)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Context

Fixes #21765.

<img width="1439" height="961" alt="Capture d’écran 2026-06-19 à 15 03
46"
src="https://github.com/user-attachments/assets/07104099-19de-45f9-9cca-eaaacbc326af"
/>

When a page-level information banner is visible on a record table (e.g.
the mailbox **"Sync lost with mailbox … Please reconnect"** banner), the
table footer / bottom edge was hidden behind the card boundary. As a
side effect, drag-select **auto-scroll never triggered** near the
bottom, because the cursor could not reach the scroll wrapper's real
bottom edge.

## Root cause

In `PageCardLayout`, the `InformationBannerWrapper` and the page
children are siblings in a flex column. The record index child
(`StyledIndexContainer`) used `height: 100%`, so it demanded the
**full** body height regardless of the banner. With a banner present,
banner height + 100% exceeded the card, and since the container's
content (the table) has a large min-content height it would not shrink —
so the bottom (the footer) was pushed past `StyledCard`'s `overflow:
hidden` and clipped.

`useDragSelectWithAutoScroll` only scrolls when the cursor is within
`AUTO_SCROLL_EDGE_THRESHOLD_PX` (20px) of `containerRect.bottom`. With
the bottom edge clipped off-screen, that zone was unreachable, so
auto-scroll appeared broken.

## Fix

Replace `height: 100%` with `flex: 1; min-height: 0;` so the container
takes the space **remaining** after the banner — the same flex idiom its
parent `StyledBodyContent` already uses. When no banner is shown, the
banner wrapper collapses to `height: 0`, so the table fills the full
height exactly as before (no behaviour change in the common case).

## Testing

- Verified locally: with the mailbox reconnect banner forced visible on
the Companies table, the footer (aggregate row) stays visible and
drag-select auto-scroll reaches the bottom.
- No change when no banner is present.

This is a layout fix, not a drag-select threshold change — as suggested
in the issue, raising the threshold would only mask the layout problem.

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/21852?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. -->
---
 .../record-index/components/RecordIndexContainerGater.tsx      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainerGater.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainerGater.tsx
index 648be4912a..3247814a3d 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainerGater.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainerGater.tsx
@@ -26,7 +26,8 @@ import { useCallback } from 'react';
 
 const StyledIndexContainer = styled.div`
   display: flex;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
   width: 100%;
 `;