From 10ee130eb951d397c7f0c428749ba8c05a0777e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Malfait?= <felix.malfait@gmail.com>
Date: Fri, 7 Aug 2026 09:49:27 +0200
Subject: [PATCH] Show only the record title in the mobile page header (#23902)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On mobile there isn't enough room for the full breadcrumb, so the object
type and the pagination count were pushed under the action button.

## Changes

**`ObjectRecordShowPageBreadcrumb`** — on mobile, hide the object-type
prefix (icon + plural label + `/`) and the pagination count. Only the
record title remains, still editable and still ellipsized.

**`PageCardHeader`** — the header grid was `minmax(0, auto) minmax(0,
1fr)`. The left (breadcrumb) track grew toward its max-content size and
consumed the whole row, collapsing the action-button track to 0, which
is why the button ended up drawn over the text. It's now `minmax(0,
auto) minmax(min-content, 1fr)`, with `min-width: 0` dropped from the
right container so its min-content is meaningful: the right column still
takes leftover space, but can never shrink below what the buttons need.

Note on why the right column isn't just `auto`: the pinned action bar
measures its own container width (`NodeDimension`) to decide how many
buttons fit inline, so a content-sized track gives it a 0 basis and it
collapses to the overflow `⋮` alone.

## Verification

Checked in a browser at an iPhone 13 viewport and at 1280px, with a
record renamed to a long title to reproduce the overflow.

- Mobile before: breadcrumb right edge 24px past the button's left edge,
`(1/599)` under the `⋮`.
- Mobile after: title only, ellipsized, right edge 8px clear of the
button.
- Desktop after: unchanged — object type, title, count, and the full
action bar (Send Email, favorite, prev/next, `⋮`) all present.

Also checked the record index, people index, and settings headers at
both widths for horizontal overflow: none.

`lint:diff-with-main` and `typecheck` pass on twenty-front.

---
_Generated by [Claude
Code](https://claude.ai/code/session_01Xh1XGCRzouRroaRyDb7Nfn)_

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/23902?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. -->
---
 .../ObjectRecordShowPageBreadcrumb.tsx        | 35 +++++++++++--------
 .../layout/page/components/PageCardHeader.tsx |  3 +-
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/ObjectRecordShowPageBreadcrumb.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/ObjectRecordShowPageBreadcrumb.tsx
index 1672c126b4..409a0f387d 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/components/ObjectRecordShowPageBreadcrumb.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/components/ObjectRecordShowPageBreadcrumb.tsx
@@ -11,6 +11,7 @@ import { useRecordShowPagePagination } from '@/object-record/record-show/hooks/u
 import { getRecordShowPageBreadcrumbPaginationLabel } from '@/object-record/record-show/utils/getRecordShowPageBreadcrumbPaginationLabel';
 import { RecordTitleCell } from '@/object-record/record-title-cell/components/RecordTitleCell';
 import { RecordTitleCellContainerType } from '@/object-record/record-title-cell/types/RecordTitleCellContainerType';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { styled } from '@linaria/react';
 import { useState } from 'react';
 import { FieldMetadataType } from 'twenty-shared/types';
@@ -62,6 +63,8 @@ export const ObjectRecordShowPageBreadcrumb = ({
 }) => {
   const [isInitialLoad, setIsInitialLoad] = useState(true);
 
+  const isMobile = useIsMobile();
+
   const { loading } = useFindOneRecord({
     objectNameSingular,
     objectRecordId,
@@ -114,17 +117,19 @@ export const ObjectRecordShowPageBreadcrumb = ({
 
   return (
     <StyledEditableTitleContainer data-testid="top-bar-title">
-      <StyledEditableTitlePrefix
-        onClick={() => {
-          navigateToIndexView();
-        }}
-      >
-        <StyledBreadcrumbPrefixObjectIcon>
-          <ObjectMetadataIcon objectMetadataItem={objectMetadataItem} />
-        </StyledBreadcrumbPrefixObjectIcon>
-        {objectLabel}
-        <span>{' / '}</span>
-      </StyledEditableTitlePrefix>
+      {!isMobile && (
+        <StyledEditableTitlePrefix
+          onClick={() => {
+            navigateToIndexView();
+          }}
+        >
+          <StyledBreadcrumbPrefixObjectIcon>
+            <ObjectMetadataIcon objectMetadataItem={objectMetadataItem} />
+          </StyledBreadcrumbPrefixObjectIcon>
+          {objectLabel}
+          <span>{' / '}</span>
+        </StyledEditableTitlePrefix>
+      )}
       <StyledTitle>
         <FieldContext.Provider
           value={{
@@ -155,9 +160,11 @@ export const ObjectRecordShowPageBreadcrumb = ({
           />
         </FieldContext.Provider>
       </StyledTitle>
-      <StyledPaginationInformation>
-        {paginationInformation}
-      </StyledPaginationInformation>
+      {!isMobile && (
+        <StyledPaginationInformation>
+          {paginationInformation}
+        </StyledPaginationInformation>
+      )}
     </StyledEditableTitleContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageCardHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageCardHeader.tsx
index c82ae45c50..2eafb4defc 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/components/PageCardHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/components/PageCardHeader.tsx
@@ -33,7 +33,7 @@ const StyledHeader = styled.div<{ centerTitle?: boolean }>`
   grid-template-columns: ${({ centerTitle }) =>
     centerTitle
       ? 'minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr)'
-      : 'minmax(0, auto) minmax(0, 1fr)'};
+      : 'minmax(0, auto) minmax(min-content, 1fr)'};
   min-height: ${SIDE_PANEL_TOP_BAR_HEIGHT}px;
   padding: 0 ${themeCssVariables.spacing[3]};
   width: 100%;
@@ -76,7 +76,6 @@ const StyledRight = styled.div<{ centerTitle?: boolean }>`
   grid-column: ${({ centerTitle }) => (centerTitle ? 3 : 2)};
   justify-content: flex-end;
   justify-self: end;
-  min-width: 0;
   width: 100%;
 `;