Größere Header- und Sidebar-Icons (Web + iPhone) (#172)

* Increase header and sidebar icon scale on web and mobile

Raise shared --icon-sm/md/lg tokens (~25%) for web shell chrome, widen
chat header action controls, and align Expo home/thread header glyphs
with 44pt tap targets.

Co-authored-by: cynarAI <cynarAI@users.noreply.github.com>

* ci: retrigger checks after flaky evo-deploy test

Co-authored-by: cynarAI <cynarAI@users.noreply.github.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: cynarAI <cynarAI@users.noreply.github.com>

apps/mobile/app/index.tsx

@@ -46,7 +46,7 @@ import {
   selectInitialSpace,
   selectSpace,
 } from "../lib/api";
-import { mobileTokens, resolveMobileAppearance } from "../lib/appearance";
+import { mobileShellIconSizes, mobileTokens, resolveMobileAppearance } from "../lib/appearance";
 import { autopilotSummary } from "../lib/autopilot";
 import { allowFocusPrompt, scheduleFocusPrompt } from "../lib/focus-prompt";
 import { t, useI18n } from "../lib/i18n";
@@ -461,7 +461,7 @@ export default function Home() {
             <NativeSymbol
               ios={activityMode ? "bell.fill" : "bell"}
               android={activityMode ? "notifications" : "notifications-outline"}
-              size={17}
+              size={mobileShellIconSizes.md}
               color={activityMode ? tokens.primaryForeground : tokens.foreground}
             />
           </CircleButton>
@@ -475,7 +475,7 @@ export default function Home() {
               })
             }
           >
-            <NativeSymbol ios="magnifyingglass" android="search" size={17} />
+            <NativeSymbol ios="magnifyingglass" android="search" size={mobileShellIconSizes.md} />
           </CircleButton>
           <CircleButton
             accessibilityLabel={t("Create")}
@@ -489,7 +489,7 @@ export default function Home() {
               ]);
             }}
           >
-            <NativeSymbol ios="plus" android="add" size={18} />
+            <NativeSymbol ios="plus" android="add" size={mobileShellIconSizes.lg} />
           </CircleButton>
         </View>
       </View>
@@ -610,7 +610,11 @@ export default function Home() {
                     }}
                     style={({ pressed }) => [styles.spaceActions, pressed && styles.rowPressed]}
                   >
-                    <NativeSymbol ios="ellipsis" android="ellipsis-horizontal" size={20} />
+                    <NativeSymbol
+                      ios="ellipsis"
+                      android="ellipsis-horizontal"
+                      size={mobileShellIconSizes.lg}
+                    />
                   </Pressable>
                 ) : null}
               </View>
@@ -1058,9 +1062,9 @@ function createHomeStyles() {
       gap: 12,
     },
     circleButton: {
-      width: 40,
+      width: 44,
-      height: 40,
+      height: 44,
-      borderRadius: 20,
+      borderRadius: 22,
       backgroundColor: native.fillPressed,
       alignItems: "center",
       justifyContent: "center",

apps/mobile/app/thread.tsx

@@ -101,7 +101,7 @@ import {
   shouldApplyMobileThreadRefresh,
   subscribeThread,
 } from "../lib/api";
-import { mobileTokens } from "../lib/appearance";
+import { mobileShellIconSizes, mobileTokens } from "../lib/appearance";
 import { type MobileArtifactTarget, openMobileArtifact } from "../lib/artifact-open";
 import { confirmDeleteBot } from "../lib/bot-lifecycle";
 import { cancelFocusPrompt, focusPromptThreadActive } from "../lib/focus-prompt";
@@ -585,7 +585,7 @@ function Thread() {
             <NativeSymbol
               ios="gearshape"
               android="settings-outline"
-              size={21}
+              size={mobileShellIconSizes.lg}
               color={tokens.foreground}
             />
           </Pressable>
@@ -594,7 +594,7 @@ function Thread() {
             <NativeSymbol
               ios="ellipsis"
               android="ellipsis-horizontal"
-              size={21}
+              size={mobileShellIconSizes.lg}
               color={tokens.foreground}
             />
           </Pressable>

apps/mobile/lib/appearance.ts

@@ -60,6 +60,12 @@ export function mobileTokens(
   return tokensForAppearance(resolveMobileAppearance(preference, scheme));
 }
 
+/** Header and inbox nav glyphs — aligned with web `--icon-*` scale (~25% larger). */
+export const mobileShellIconSizes = {
+  md: 22,
+  lg: 26,
+} as const;
+
 export function subscribeAppearance(listener: () => void): () => void {
   listeners.add(listener);
   return () => {

apps/web/src/pages/SettingsOverlay.tsx

@@ -195,7 +195,7 @@ export function SettingsOverlay({
                       : "text-muted-foreground hover:bg-accent hover:text-foreground"
                   }`}
                 >
-                  <Icon className="size-4 shrink-0" strokeWidth={1.75} />
+                  <Icon className="size-icon-sm shrink-0" strokeWidth={1.75} />
                   <span className="whitespace-nowrap">{item.label}</span>
                 </button>
               );

apps/web/src/pages/Shell.tsx

@@ -3232,7 +3232,7 @@ export function ShellPage() {
                   aria-label={t`Browser`}
                   onClick={() => setPanel(panel === "browser" ? null : "browser")}
                   data-active={panel === "browser" ? "" : undefined}
-                  className="app-no-drag rk-touch-target grid h-[30px] w-[34px] place-items-center rounded-[9px] hover:bg-accent data-active:bg-accent"
+                  className="app-no-drag rk-touch-target grid size-control-sm min-h-control-sm min-w-control-sm place-items-center rounded-[9px] hover:bg-accent data-active:bg-accent"
                 >
                   <Globe strokeWidth={1.7} className="text-foreground/75 size-icon-lg" />
                 </button>
@@ -3251,7 +3251,7 @@ export function ShellPage() {
                       }
                     }}
                     data-active={panel === "computer" ? "" : undefined}
-                    className="app-no-drag rk-touch-target grid h-[30px] w-[34px] place-items-center rounded-[9px] hover:bg-accent data-active:bg-accent"
+                    className="app-no-drag rk-touch-target grid size-control-sm min-h-control-sm min-w-control-sm place-items-center rounded-[9px] hover:bg-accent data-active:bg-accent"
                   >
                     <PanelRight strokeWidth={1.7} className="text-foreground/75 size-icon-lg" />
                   </button>

packages/ui-tokens/src/index.ts

@@ -165,9 +165,9 @@ export const scaleTokens = {
   lineHeightBody: "1.5",
   lineHeightReading: "1.65",
   lineHeightTight: "1.3",
-  iconSm: "1rem",
+  iconSm: "1.25rem",
-  iconMd: "1.125rem",
+  iconMd: "1.375rem",
-  iconLg: "1.25rem",
+  iconLg: "1.5rem",
   controlHeightXs: "1.75rem",
   controlHeightSm: "2.25rem",
   controlHeightMd: "2.5rem",

packages/ui-tokens/src/tokens.css

@@ -46,9 +46,9 @@
   --line-height-body: 1.5;
   --line-height-reading: 1.65;
   --line-height-tight: 1.3;
-  --icon-sm: 1rem;
+  --icon-sm: 1.25rem;
-  --icon-md: 1.125rem;
+  --icon-md: 1.375rem;
-  --icon-lg: 1.25rem;
+  --icon-lg: 1.5rem;
   --control-height-xs: 1.75rem;
   --control-height-sm: 2.25rem;
   --control-height-md: 2.5rem;
@@ -108,9 +108,9 @@
   --line-height-body: 1.5;
   --line-height-reading: 1.65;
   --line-height-tight: 1.3;
-  --icon-sm: 1rem;
+  --icon-sm: 1.25rem;
-  --icon-md: 1.125rem;
+  --icon-md: 1.375rem;
-  --icon-lg: 1.25rem;
+  --icon-lg: 1.5rem;
   --control-height-xs: 1.75rem;
   --control-height-sm: 2.25rem;
   --control-height-md: 2.5rem;