fix(twenty-front): new layout fast-follows — command menu, field options & logs (#21429)

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

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;
 `;
 

packages/twenty-front/src/modules/settings/event-logs/components/SettingsLogs.tsx

@@ -162,7 +162,7 @@ export const SettingsLogs = () => {
   };
 
   const renderUpgradeCard = () => (
-    <Card rounded>
+    <Card rounded backgroundColor={themeCssVariables.background.secondary}>
       <SettingsOptionCardContentButton
         Icon={IconLock}
         title={t`Upgrade to access audit logs`}
@@ -230,7 +230,11 @@ export const SettingsLogs = () => {
 
   return (
     <StyledRoot>
-      <Card rounded fullWidth>
+      <Card
+        rounded
+        fullWidth
+        backgroundColor={themeCssVariables.background.secondary}
+      >
         <StyledCardContent>
           <StyledSelectorRow>
             <StyledSelectorGrow>

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(

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 = () => {
             </motion.div>
           )}
         </AnimatePresence>
-        {lastChip &&
-          sidePanelPage !== SidePanelPages.CommandMenuDisplay &&
-          sidePanelPage !== SidePanelPages.CommandMenuEdit &&
-          sidePanelPage !== SidePanelPages.SearchRecords && (
-            <SidePanelPageInfo pageChip={lastChip} />
-          )}
-        {(sidePanelPage === SidePanelPages.CommandMenuDisplay ||
-          sidePanelPage === SidePanelPages.CommandMenuEdit ||
-          sidePanelPage === SidePanelPages.SearchRecords) && (
+        {lastChip && !COMMAND_MENU_SIDE_PANEL_PAGES.includes(sidePanelPage) && (
+          <SidePanelPageInfo pageChip={lastChip} />
+        )}
+        {COMMAND_MENU_SIDE_PANEL_PAGES.includes(sidePanelPage) && (
           <>
             <StyledInput
               data-testid={SIDE_PANEL_FOCUS_ID}