From bb5a97e28874dadb2b9a000e1f850a5cd054a8c9 Mon Sep 17 00:00:00 2001
From: jtrzupek <jtrzupek@gmail.com>
Date: Mon, 1 Jun 2026 21:44:16 +0200
Subject: [PATCH] fix(mobile): unify header branding to logo mark + fix top-tab
 overflow on narrow phones
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Header showed the 'goon' text wordmark while the login screen leads with the GoonMark
  symbol — switch the header to GoonMark so the logo is consistent across login + main.
- Scenes/Movies/Sites could overlap the header action icons on narrow phones: the mark is
  narrower than the wordmark, row gap reduced 16->10, and the 'Sign out' text replaced with
  a compact icon — frees ~80px so the left (logo+tabs) and right (actions) fit down to ~320px.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 mobile/src/navigation.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/mobile/src/navigation.tsx b/mobile/src/navigation.tsx
index 9604752..d27c83e 100644
--- a/mobile/src/navigation.tsx
+++ b/mobile/src/navigation.tsx
@@ -4,7 +4,7 @@ import {
   useNavigationContainerRef,
 } from '@react-navigation/native';
 import { BugReportFAB } from './components/BugReportFAB';
-import { GoonWordmark } from './components/GoonWordmark';
+import { GoonMark } from './components/GoonWordmark';
 import { GoonClient } from './api';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React from 'react';
@@ -94,9 +94,10 @@ function TopTabs({
 }) {
   const tabs: TopTab[] = ['Scenes', 'Movies', 'Sites'];
   return (
-    <View style={{ flexDirection: 'row', gap: 16, paddingHorizontal: 12, alignItems: 'center' }}>
-      {/* Wordmark — branding po lewej, dystans do pierwszego tabu. */}
-      <GoonWordmark size={24} />
+    <View style={{ flexDirection: 'row', gap: 10, paddingHorizontal: 10, alignItems: 'center' }}>
+      {/* Logo (mark) — spójne z ekranem logowania; węższe od wordmarku, więc Scenes/Movies/Sites
+          + akcje po prawej mieszczą się bez nachodzenia na wąskich telefonach. */}
+      <GoonMark size={30} />
       <View style={{ width: 1, height: 18, backgroundColor: theme.border, marginRight: 2 }} />
       {tabs.map((t) => {
         const active = t === current;
@@ -178,7 +179,7 @@ export function AppNavigator({ onLogout, client, appVersion }: AppNavigatorProps
                   <Text style={{ color: theme.muted, fontSize: 18 }}>⚙</Text>
                 </Pressable>
                 <Pressable onPress={onLogout} hitSlop={12}>
-                  <Text style={{ color: theme.muted, fontSize: 13 }}>Sign out</Text>
+                  <Text style={{ fontSize: 17 }}>🚪</Text>
                 </Pressable>
               </View>
             ),
@@ -199,7 +200,7 @@ export function AppNavigator({ onLogout, client, appVersion }: AppNavigatorProps
             headerRight: () => (
               <View style={{ flexDirection: 'row', gap: 14, alignItems: 'center' }}>
                 <Pressable onPress={onLogout} hitSlop={12}>
-                  <Text style={{ color: theme.muted, fontSize: 13 }}>Sign out</Text>
+                  <Text style={{ fontSize: 17 }}>🚪</Text>
                 </Pressable>
               </View>
             ),
@@ -220,7 +221,7 @@ export function AppNavigator({ onLogout, client, appVersion }: AppNavigatorProps
             headerRight: () => (
               <View style={{ flexDirection: 'row', gap: 14, alignItems: 'center' }}>
                 <Pressable onPress={onLogout} hitSlop={12}>
-                  <Text style={{ color: theme.muted, fontSize: 13 }}>Sign out</Text>
+                  <Text style={{ fontSize: 17 }}>🚪</Text>
                 </Pressable>
               </View>
             ),