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:
+1
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user