twenty

Files

T

Félix Malfait 10ee130eb9 Show only the record title in the mobile page header (#23902 )

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. -->

2026-08-07 09:49:27 +02:00