From 6260868c2fab766758f13b8e5a44b937129b9c6a Mon Sep 17 00:00:00 2001 From: Abhijeet Singh Date: Mon, 5 Oct 2026 18:05:38 +0900 Subject: [PATCH] fix: settings submenu flag sizing and Back label alignment - The language flags lost their 20x14 icon slot when the list moved onto SettingsSubmenuList (#3108). The flag is sized 100% of its slot, so the viewBox-only en/es/fr SVGs stretched to the menu's full width (el.svg ships its own 20x20 size, which is why Greek stayed small). The slot now gives image icons a 20x14 box with 2px rounding again. - The Back row used a 10px icon gap against the options' 8px, putting its label 2px right of the option labels. Every leading slot (Back chevron, theme glyph, flag) is now one fixed 20px width with the glyph centred and an 8px gap, so the labels share one column in both submenus. Equal gaps alone wouldn't have aligned the Language list: the flags are 20px wide against 18px glyphs. - The mobile drawer widens that slot to 28px to fit its 24px glyphs and 28x20 flags. `:first-child` targets only the leading slot, since the selected-option check comes after the label. --- src/layouts/MobileMenu.tsx | 6 +++--- src/layouts/components/SettingsSubmenuList/index.tsx | 11 ++++++++--- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/layouts/MobileMenu.tsx b/src/layouts/MobileMenu.tsx index 4116822584..ad7c7af499 100644 --- a/src/layouts/MobileMenu.tsx +++ b/src/layouts/MobileMenu.tsx @@ -55,9 +55,9 @@ const menuListSx = { // 3rem row. Only currentColor SvgIcons are caught — the language flags are `` and carry // their own responsive box. '& .MuiSvgIcon-root': { fontSize: '1.5rem' }, - // The language flags are ``, not currentColor glyphs, so they scale by box rather than - // font-size. `:has(img)` keeps this off the Back chevron and check slots in the same list. - '& .MuiListItemIcon-root:has(img)': { width: 28, height: 20 }, + // The submenus' leading icon slot (the check trails, never first) widens for 28x20 flags. + '& .MuiListItemIcon-root:first-child': { width: 28 }, + '& .MuiListItemIcon-root:has(img)': { height: 20 }, }; // The hamburger (three rounded lines, per the design SVG) that morphs into an X. Rendered inside diff --git a/src/layouts/components/SettingsSubmenuList/index.tsx b/src/layouts/components/SettingsSubmenuList/index.tsx index 793237d61a..d1b6f5699b 100644 --- a/src/layouts/components/SettingsSubmenuList/index.tsx +++ b/src/layouts/components/SettingsSubmenuList/index.tsx @@ -4,9 +4,14 @@ import { ReactNode } from 'react'; import { CheckIcon } from 'src/components/icons/CheckIcon'; import { ChevronLeftIcon } from 'src/components/icons/ChevronLeftIcon'; -// Chevron/icon-to-label gap, per the design spec — the Back row runs 2px wider than an option. -const BACK_ICON_SX = { mr: '0.625rem', color: 'fg-chevron' }; -const OPTION_ICON_SX = { mr: '0.5rem', color: 'fg-3' }; +const ICON_SLOT_SX = { + width: '1.25rem', + mr: '0.5rem', + justifyContent: 'center', + '&:has(img)': { height: '0.875rem', borderRadius: '2px', overflow: 'hidden' }, +}; +const BACK_ICON_SX = { ...ICON_SLOT_SX, color: 'fg-chevron' }; +const OPTION_ICON_SX = { ...ICON_SLOT_SX, color: 'fg-3' }; const ROW_SX = { cursor: 'pointer', color: 'fg-1' }; interface SettingsSubmenuOption {