From 72dd3af1559a00d2f4bc8005378368a64de5a4a4 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Wed, 25 Mar 2026 18:37:16 +0100 Subject: [PATCH] fix SVG icon sizing broken in Chrome 142 (#18974) ## Summary - Chrome 142 rejects `var()` references in SVG `width`/`height` attributes, causing icons to fall back to `100%` size - Replaced `themeCssVariables.icon.size.*` / `themeCssVariables.icon.stroke.*` (raw `var()` strings) with resolved `theme.icon.size.*` / `theme.icon.stroke.*` (numeric values from `ThemeContext`) when passed as icon component props - Affects 3 navigation menu item components: `NavigationMenuItemFolder`, `NavigationMenuItemLinkDisplay`, `LinkIconWithLinkOverlay` ## Test plan - [ ] Verify navigation drawer folder chevron icons render at correct size - [ ] Verify navigation drawer link arrow icons render at correct size - [ ] Verify link overlay icons render at correct size - [ ] Test in Chrome 142+ to confirm the fix - [ ] Test in Firefox/Safari to confirm no regression --- .../folder/components/NavigationMenuItemFolder.tsx | 13 +++++++------ .../link/components/LinkIconWithLinkOverlay.tsx | 9 +++++---- .../components/NavigationMenuItemLinkDisplay.tsx | 8 +++++--- 3 files changed, 17 insertions(+), 13 deletions(-) diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolder.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolder.tsx index 98ca33127a..e1b16be1a6 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolder.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolder.tsx @@ -1,7 +1,7 @@ -import { Suspense, lazy } from 'react'; +import { Suspense, lazy, useContext } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { IconChevronDown, IconChevronRight, useIcons } from 'twenty-ui/display'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { useIsMobile } from 'twenty-ui/utilities'; import { type NavigationMenuItem } from '~/generated-metadata/graphql'; @@ -112,6 +112,7 @@ const NavigationMenuItemFolderReadOnlyContent = ({ }: NavigationMenuItemFolderReadOnlyContentProps) => { const { getIcon } = useIcons(); const isMobile = useIsMobile(); + const { theme } = useContext(ThemeContext); const FolderIcon = getIcon(folderIconKey ?? FOLDER_ICON_DEFAULT); const { isOpen, handleToggle, selectedNavigationMenuItemIndex } = @@ -137,14 +138,14 @@ const NavigationMenuItemFolderReadOnlyContent = ({ rightOptions={ isOpen ? ( ) : ( ) diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/LinkIconWithLinkOverlay.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/LinkIconWithLinkOverlay.tsx index 6d764ce5a0..33d0a83228 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/LinkIconWithLinkOverlay.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/LinkIconWithLinkOverlay.tsx @@ -1,8 +1,8 @@ import { styled } from '@linaria/react'; -import { useState } from 'react'; +import { useContext, useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; import type { IconComponent } from 'twenty-ui/display'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_LINK } from '@/navigation-menu-item/common/constants/NavigationMenuItemDefaultColorLink'; import { getLinkFaviconUrl } from '@/navigation-menu-item/display/link/utils/getLinkFaviconUrl'; @@ -75,6 +75,7 @@ export const LinkIconWithLinkOverlay = ({ DefaultIcon, color: navItemColor, }: LinkIconWithLinkOverlayProps) => { + const { theme } = useContext(ThemeContext); const [localFailedLink, setLocalFailedLink] = useState(null); const faviconUrl = getLinkFaviconUrl(link); const linkKey = link ?? ''; @@ -105,7 +106,7 @@ export const LinkIconWithLinkOverlay = ({ ) : ( )} @@ -113,7 +114,7 @@ export const LinkIconWithLinkOverlay = ({ diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/NavigationMenuItemLinkDisplay.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/NavigationMenuItemLinkDisplay.tsx index 97c5f60040..38cc4c0457 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/NavigationMenuItemLinkDisplay.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/NavigationMenuItemLinkDisplay.tsx @@ -1,5 +1,6 @@ +import { useContext } from 'react'; import { IconArrowUpRight } from 'twenty-ui/display'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState'; import { NavigationMenuItemIcon } from '@/navigation-menu-item/display/components/NavigationMenuItemIcon'; @@ -20,14 +21,15 @@ export const NavigationMenuItemLinkDisplay = ({ const isLayoutCustomizationModeEnabled = useAtomStateValue( isLayoutCustomizationModeEnabledState, ); + const { theme } = useContext(ThemeContext); const label = getLinkNavigationMenuItemLabel(item); const computedLink = getLinkNavigationMenuItemComputedLink(item); const defaultRightOptions = !isLayoutCustomizationModeEnabled && ( );