From 9d7f0c405f6b802f317b63533ae7d877c3fbbd9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Thu, 11 Jun 2026 08:58:23 +0200 Subject: [PATCH] =?UTF-8?q?fix(twenty-front):=20new=20layout=20fast-follow?= =?UTF-8?q?s=20=E2=80=94=20command=20menu,=20field=20options=20&=20logs=20?= =?UTF-8?q?(#21429)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fast-follows for the new layout — the remaining open sub-issues of twentyhq/core-team-issues#2478. ## Changes - **Command menu items should not have extra right padding** (twentyhq/core-team-issues#2500) `SidePanelList` set `width: calc(100% - spacing[4])` on top of its own 8px left/right padding. Under the global `box-sizing: border-box`, that extra `-16px` shrinks the list and, because it's left-aligned, dumps the whole gap on the right. Switched to `width: 100%` so item highlights inset 8px symmetrically. This is shared by every side-panel list — they all had the same right-only gutter, so they're all corrected the same way. - **Field options should not be cropped and should keep row gaps** (twentyhq/core-team-issues#2503) The option row used a fixed `height: spacing[6]`, so under border-box the `6px` vertical padding was absorbed and consecutive rows sat flush. Changed `height` → `min-height` so the padding separates the rows again. - **Logs table with filters should use Background secondary** (twentyhq/core-team-issues#2505) The Logs filter card and the upgrade card defaulted to a transparent background, showing the white page through. Passed `backgroundColor={themeCssVariables.background.secondary}`, matching `SettingsTableCard`. The results table stays on the primary surface, per the Figma reference. - **Command menu back chevron** (twentyhq/core-team-issues#2504) `SidePanelTopBar` showed a back chevron whenever the nav stack had more than one entry. A command-menu page is the root of a fresh command-menu session, so it now only shows the chevron when it was opened from another command-menu page. Every other side-panel page keeps standard history-based back navigation, so workflow / page-layout / record stacks are unaffected. ## Verification - oxlint (`--type-aware`, full `src/`): 0 errors - oxfmt: clean - tsgo typecheck: no errors in the changed files (the one reported error is pre-existing in `RestPlayground.tsx`, which this PR does not touch) - Verified live at apple.localhost: - #2500 — command menu item highlight insets measured 8px left / 8px right (was 8 / 24) - #2503 — option rows render at 38px tall with ~14px gaps, text no longer cropped - #2505 — filter + upgrade cards compute to background-secondary; results table stays on primary - #2504 — direct command menu shows the close-X with no chevron; pages opened from the command menu still show the chevron ## Open question for review (#2504) The issue also describes the page-header three-dots toggle: *"the three dots icon button should remain visible if the side panel is on a page that is not a child of the command menu (AI chat, or a page opened directly)."* Today that toggle morphs to an X for any non-command-menu side-panel page (e.g. Ask AI). Honoring that touches the shared `SidePanelToggleButton`, and there's a related decision: search / Ask AI opened from the command menu currently reset the nav stack rather than push, so they don't get a "back to command menu" chevron. I left those out here since they're a behavior change to a shared control with a product call attached — happy to follow up once you confirm the intended toggle behavior. Closes twentyhq/core-team-issues#2500 Closes twentyhq/core-team-issues#2503 Closes twentyhq/core-team-issues#2505 Refs twentyhq/core-team-issues#2504 Refs twentyhq/core-team-issues#2478 --- ...tingsDataModelFieldSelectFormOptionRow.tsx | 2 +- .../event-logs/components/SettingsLogs.tsx | 8 +++-- .../side-panel/components/SidePanelList.tsx | 2 +- .../side-panel/components/SidePanelTopBar.tsx | 35 ++++++++++++------- 4 files changed, 31 insertions(+), 16 deletions(-) diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx index 057ad72441..338174abe2 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx @@ -74,7 +74,7 @@ type SettingsDataModelFieldSelectFormOptionRowProps = { const StyledRow = styled.div` align-items: center; display: flex; - height: ${themeCssVariables.spacing[6]}; + min-height: ${themeCssVariables.spacing[6]}; padding: ${themeCssVariables.spacing['1.5']} 0; `; diff --git a/packages/twenty-front/src/modules/settings/event-logs/components/SettingsLogs.tsx b/packages/twenty-front/src/modules/settings/event-logs/components/SettingsLogs.tsx index 9c51b87432..2d7ee5f8c2 100644 --- a/packages/twenty-front/src/modules/settings/event-logs/components/SettingsLogs.tsx +++ b/packages/twenty-front/src/modules/settings/event-logs/components/SettingsLogs.tsx @@ -162,7 +162,7 @@ export const SettingsLogs = () => { }; const renderUpgradeCard = () => ( - + { return ( - + diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelList.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelList.tsx index 482a6540ca..7e19e628c1 100644 --- a/packages/twenty-front/src/modules/side-panel/components/SidePanelList.tsx +++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelList.tsx @@ -29,7 +29,7 @@ const StyledInnerList = styled.div` padding-left: ${themeCssVariables.spacing[2]}; padding-right: ${themeCssVariables.spacing[2]}; padding-top: ${themeCssVariables.spacing[2]}; - width: calc(100% - ${themeCssVariables.spacing[4]}); + width: 100%; @media (min-width: ${MOBILE_VIEWPORT}px) { max-height: calc( diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBar.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBar.tsx index 06392f70fa..55580d2c7a 100644 --- a/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBar.tsx +++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBar.tsx @@ -28,6 +28,12 @@ import { themeCssVariables, } from 'twenty-ui-deprecated/theme-constants'; +const COMMAND_MENU_SIDE_PANEL_PAGES = [ + SidePanelPages.CommandMenuDisplay, + SidePanelPages.CommandMenuEdit, + SidePanelPages.SearchRecords, +]; + const StyledInputContainer = styled.div<{ isMobile: boolean }>` align-items: center; background-color: ${themeCssVariables.background.secondary}; @@ -127,10 +133,20 @@ export const SidePanelTopBar = () => { }); }; - const canGoBack = sidePanelNavigationStack.length > 1; + const currentPage = sidePanelNavigationStack.at(-1)?.page; + const previousPage = sidePanelNavigationStack.at(-2)?.page; - const shouldShowCloseButton = - !isMobile && sidePanelNavigationStack.length === 1; + // A command-menu page is the root of a fresh command-menu session, so it only + // offers a back chevron when it was opened from another command-menu page. + // Every other side-panel page keeps standard "go back when there is history". + const canGoBack = + currentPage !== undefined && + COMMAND_MENU_SIDE_PANEL_PAGES.includes(currentPage) + ? previousPage !== undefined && + COMMAND_MENU_SIDE_PANEL_PAGES.includes(previousPage) + : sidePanelNavigationStack.length > 1; + + const shouldShowCloseButton = !isMobile && !canGoBack; const shouldShowBackButton = canGoBack; @@ -166,15 +182,10 @@ export const SidePanelTopBar = () => { )} - {lastChip && - sidePanelPage !== SidePanelPages.CommandMenuDisplay && - sidePanelPage !== SidePanelPages.CommandMenuEdit && - sidePanelPage !== SidePanelPages.SearchRecords && ( - - )} - {(sidePanelPage === SidePanelPages.CommandMenuDisplay || - sidePanelPage === SidePanelPages.CommandMenuEdit || - sidePanelPage === SidePanelPages.SearchRecords) && ( + {lastChip && !COMMAND_MENU_SIDE_PANEL_PAGES.includes(sidePanelPage) && ( + + )} + {COMMAND_MENU_SIDE_PANEL_PAGES.includes(sidePanelPage) && ( <>