Reverse pinned command menu item order on record header (#22577)

## Before
<img width="502" height="102" alt="CleanShot 2026-07-06 at 12 10 42@2x"
src="https://github.com/user-attachments/assets/da186911-5a1f-446f-a590-1af4a191554f"
/>

## After
<img width="500" height="102" alt="CleanShot 2026-07-06 at 12 10 17@2x"
src="https://github.com/user-attachments/assets/6e7bb914-55af-4968-a15a-fb17378fffc7"
/>

Pinned command menu items in the record page header rendered
left-to-right by position, putting the first item on the left. They
should read the other way: first item on the right, last on the left.

Fixed with `flex-direction: row-reverse` on the items container so the
reversal is purely visual. The DOM/source order stays in position order,
so the responsive overflow logic still keeps the highest-priority items
visible and keyboard/screen-reader order is unaffected.

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22577?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:
Raphaël Bosi
2026-07-06 12:17:30 +02:00
committed by GitHub
parent e5e3fadbbb
commit 4cd05b2b3e
@@ -31,6 +31,7 @@ const StyledContainer = styled.div`
const StyledItemsContainer = styled.div`
display: flex;
flex-direction: row-reverse;
gap: ${PINNED_COMMAND_MENU_ITEMS_GAP}px;
max-width: 100%;
overflow: hidden;