From a8e6c57f15368f5907d26045b06f6146caa50994 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Mon, 5 Oct 2026 01:07:15 +0200
Subject: [PATCH] fix(app): match compact sidebar footer glyphs to the composer
 toolbar size

#6044 enlarged the compact footer tap targets to 44x44 and also bumped the
glyphs to 24px. Keep the targets and return the glyphs to 20px, the composer
toolbar glyph size. The compact footer spec now asserts the glyph size.
---
 packages/app/e2e/browser/sidebar-help.spec.ts             | 3 +++
 packages/app/src/components/left-sidebar.tsx              | 2 +-
 packages/app/src/components/sidebar/sidebar-help-menu.tsx | 2 +-
 packages/app/src/styles/theme.ts                          | 1 -
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/app/e2e/browser/sidebar-help.spec.ts b/packages/app/e2e/browser/sidebar-help.spec.ts
index 6d2ed6e96f..2d038abbdb 100644
--- a/packages/app/e2e/browser/sidebar-help.spec.ts
+++ b/packages/app/e2e/browser/sidebar-help.spec.ts
@@ -190,6 +190,9 @@ async function expectFingerSizedFooterTargets(page: Page): Promise<void> {
     const bounds = await button.boundingBox();
     expect(bounds?.width).toBeGreaterThanOrEqual(44);
     expect(bounds?.height).toBeGreaterThanOrEqual(44);
+    // Glyphs stay at the composer toolbar size (some optically smaller); only the target grows.
+    const glyphWidth = await button.locator("svg").first().getAttribute("width");
+    expect(Number(glyphWidth)).toBeLessThanOrEqual(20);
   }
 }
 
diff --git a/packages/app/src/components/left-sidebar.tsx b/packages/app/src/components/left-sidebar.tsx
index a6def126b1..cf6a9655e0 100644
--- a/packages/app/src/components/left-sidebar.tsx
+++ b/packages/app/src/components/left-sidebar.tsx
@@ -291,7 +291,7 @@ function FooterIconButton({
   buttonRef?: RefObject<View | null>;
 }) {
   const isCompact = useIsCompactFormFactor();
-  const iconSize = isCompact ? theme.iconSize.xl : theme.iconSize.md;
+  const iconSize = isCompact ? theme.iconSize.lg : theme.iconSize.md;
 
   return (
     <Tooltip delayDuration={300}>
diff --git a/packages/app/src/components/sidebar/sidebar-help-menu.tsx b/packages/app/src/components/sidebar/sidebar-help-menu.tsx
index 85acc8cf30..5f603392f2 100644
--- a/packages/app/src/components/sidebar/sidebar-help-menu.tsx
+++ b/packages/app/src/components/sidebar/sidebar-help-menu.tsx
@@ -113,7 +113,7 @@ export function SidebarHelpMenu() {
             >
               {({ hovered }) => (
                 <ThemedCircleHelp
-                  size={isCompact ? ICON_SIZE.xl : ICON_SIZE.md}
+                  size={isCompact ? ICON_SIZE.lg : ICON_SIZE.md}
                   uniProps={hovered ? foregroundColorMapping : foregroundMutedColorMapping}
                 />
               )}
diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts
index d5c1678749..04b1e8f6ae 100644
--- a/packages/app/src/styles/theme.ts
+++ b/packages/app/src/styles/theme.ts
@@ -595,7 +595,6 @@ export const ICON_SIZE = {
   sm: 14,
   md: 16,
   lg: 20,
-  xl: 24,
 } as const;
 
 export const ICON_STROKE_WIDTH = 1.5;