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

@@ -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);
   }
 }
 

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}>

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}
                 />
               )}

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;