fix(pwa): reword the install prompt and keep it off the bottom nav

The banner sat fixed at the viewport bottom at z-index 1000, covering the
authed shell's mobile nav; it now offsets above the nav's geometry when a
signed-in mobile user has one. New casual copy replaces the Twilio line,
the dismiss button gains a localized aria-label, and de/es/ja catalogs
carry the new strings.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0189ASmkMee4F5aJ3jnKeKQv

src/components/ios-install-prompt.tsx

@@ -2,9 +2,16 @@ import { useEffect, useState } from 'react'
 import { Box, Paper, Group, Text, ActionIcon } from '@mantine/core'
 import { DownloadIcon, XIcon } from '@phosphor-icons/react'
 import { Trans, useLingui } from '@lingui/react/macro'
+import { useAuth } from '@/contexts/auth-context'
+import { useIsMobile } from '@/hooks/use-is-mobile'
+
+// Navbar geometry: 4rem height + 0.5rem margin + its safe-area bottom offset.
+const ABOVE_MOBILE_NAV_OFFSET = 'calc(4.5rem + env(safe-area-inset-bottom, 0px))'
 
 export function IOSInstallPrompt() {
   const { t } = useLingui()
+  const { user } = useAuth()
+  const isMobile = useIsMobile()
   const [show, setShow] = useState(false)
   const [platform, setPlatform] = useState<'ios' | 'android' | null>(null)
 
@@ -36,22 +43,29 @@ export function IOSInstallPrompt() {
     ? t`Tap Share → Add to Home Screen`
     : t`Tap Menu (⋮) → Add to Home screen`
 
+  // Navbar renders only under _authed, so a signed-in mobile user on a public
+  // route has no nav to clear.
+  const aboveBottomNav = Boolean(user) && isMobile
+  const bottomStyle = aboveBottomNav
+    ? { bottom: ABOVE_MOBILE_NAV_OFFSET, paddingBottom: '8px' }
+    : { bottom: 0, paddingBottom: 'calc(8px + env(safe-area-inset-bottom, 0px))' }
+
   return (
-    <Box style={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 1000, padding: '8px' }}>
+    <Box style={{ position: 'fixed', left: 0, right: 0, zIndex: 1000, padding: '8px', ...bottomStyle }}>
       <Paper shadow="lg" p="sm" style={{ background: 'var(--mantine-color-blue-9)', color: 'white' }}>
         <Group justify="space-between" wrap="nowrap">
           <Group gap="xs" wrap="nowrap" style={{ flex: 1 }}>
             <DownloadIcon size={20} style={{ flexShrink: 0 }} />
             <Box style={{ flex: 1, minWidth: 0 }}>
               <Text size="sm" fw={500} style={{ lineHeight: 1.3 }}>
-                <Trans>Please install FLXN • This will save me Twilio credits as you won't be signed out!</Trans>
+                <Trans>Add FLXN to your home screen — smoother experience, always one tap away</Trans>
               </Text>
               <Text size="xs" opacity={0.9} style={{ lineHeight: 1.2 }}>
                 {instructions}
               </Text>
             </Box>
           </Group>
-          <ActionIcon variant="subtle" color="white" onClick={handleDismiss}>
+          <ActionIcon variant="subtle" color="white" onClick={handleDismiss} aria-label={t`Dismiss`}>
             <XIcon size={18} />
           </ActionIcon>
         </Group>

src/locales/de/messages.po

@@ -392,6 +392,10 @@ msgstr "Aktivitäten"
 msgid "Activity Details"
 msgstr "Aktivitätsdetails"
 
+#: src/components/ios-install-prompt.tsx:61
+msgid "Add FLXN to your home screen — smoother experience, always one tap away"
+msgstr "Leg FLXN auf deinen Homescreen — läuft flüssiger und ist immer nur einen Tipp entfernt"
+
 #: src/features/tournaments/components/edit-enrolled-players.tsx:117
 msgid "Add Player"
 msgstr "Spieler hinzufügen"
@@ -841,6 +845,10 @@ msgstr "deviceId ist für die Übertragungsaktion erforderlich"
 msgid "Disconnect Spotify"
 msgstr "Spotify trennen"
 
+#: src/components/ios-install-prompt.tsx:68
+msgid "Dismiss"
+msgstr "Schließen"
+
 #: src/features/bracket/components/match-report.tsx:159
 msgid "Does this look right?"
 msgstr "Sieht das richtig aus?"
@@ -1864,10 +1872,6 @@ msgstr "Spieler sind erforderlich"
 msgid "Playing on {0}"
 msgstr "Wird auf {0} abgespielt"
 
-#: src/components/ios-install-prompt.tsx:47
-msgid "Please install FLXN • This will save me Twilio credits as you won't be signed out!"
-msgstr "Installier FLXN • Das spart mir Twilio-Credits, weil du nicht ausgeloggt wirst!"
-
 #: src/features/tournaments/components/group-stage-view.tsx:314
 msgid "Populate Knockout Bracket"
 msgstr "K.-o.-Runde befüllen"
@@ -2320,11 +2324,11 @@ msgstr "T"
 msgid "Tap an opponent below to compare"
 msgstr "Tippe unten auf einen Gegner zum Vergleichen"
 
-#: src/components/ios-install-prompt.tsx:37
+#: src/components/ios-install-prompt.tsx:44
 msgid "Tap Menu (⋮) → Add to Home screen"
 msgstr "Tippe auf Menü (⋮) → Zum Home-Bildschirm hinzufügen"
 
-#: src/components/ios-install-prompt.tsx:36
+#: src/components/ios-install-prompt.tsx:43
 msgid "Tap Share → Add to Home Screen"
 msgstr "Tippe auf Teilen → Zum Home-Bildschirm hinzufügen"
 

src/locales/en/messages.po

@@ -392,6 +392,10 @@ msgstr "Activities"
 msgid "Activity Details"
 msgstr "Activity Details"
 
+#: src/components/ios-install-prompt.tsx:61
+msgid "Add FLXN to your home screen — smoother experience, always one tap away"
+msgstr "Add FLXN to your home screen — smoother experience, always one tap away"
+
 #: src/features/tournaments/components/edit-enrolled-players.tsx:117
 msgid "Add Player"
 msgstr "Add Player"
@@ -841,6 +845,10 @@ msgstr "deviceId is required for transfer action"
 msgid "Disconnect Spotify"
 msgstr "Disconnect Spotify"
 
+#: src/components/ios-install-prompt.tsx:68
+msgid "Dismiss"
+msgstr "Dismiss"
+
 #: src/features/bracket/components/match-report.tsx:159
 msgid "Does this look right?"
 msgstr "Does this look right?"
@@ -1864,10 +1872,6 @@ msgstr "Players are required"
 msgid "Playing on {0}"
 msgstr "Playing on {0}"
 
-#: src/components/ios-install-prompt.tsx:47
-msgid "Please install FLXN • This will save me Twilio credits as you won't be signed out!"
-msgstr "Please install FLXN • This will save me Twilio credits as you won't be signed out!"
-
 #: src/features/tournaments/components/group-stage-view.tsx:314
 msgid "Populate Knockout Bracket"
 msgstr "Populate Knockout Bracket"
@@ -2320,11 +2324,11 @@ msgstr "T"
 msgid "Tap an opponent below to compare"
 msgstr "Tap an opponent below to compare"
 
-#: src/components/ios-install-prompt.tsx:37
+#: src/components/ios-install-prompt.tsx:44
 msgid "Tap Menu (⋮) → Add to Home screen"
 msgstr "Tap Menu (⋮) → Add to Home screen"
 
-#: src/components/ios-install-prompt.tsx:36
+#: src/components/ios-install-prompt.tsx:43
 msgid "Tap Share → Add to Home Screen"
 msgstr "Tap Share → Add to Home Screen"
 

src/locales/es/messages.po

@@ -392,6 +392,10 @@ msgstr "Actividades"
 msgid "Activity Details"
 msgstr "Detalles de la actividad"
 
+#: src/components/ios-install-prompt.tsx:61
+msgid "Add FLXN to your home screen — smoother experience, always one tap away"
+msgstr "Agrega FLXN a tu pantalla de inicio — funciona mejor y siempre está a un toque"
+
 #: src/features/tournaments/components/edit-enrolled-players.tsx:117
 msgid "Add Player"
 msgstr "Agregar Jugador"
@@ -841,6 +845,10 @@ msgstr "Se requiere deviceId para la acción de transferencia"
 msgid "Disconnect Spotify"
 msgstr "Desconectar Spotify"
 
+#: src/components/ios-install-prompt.tsx:68
+msgid "Dismiss"
+msgstr "Cerrar"
+
 #: src/features/bracket/components/match-report.tsx:159
 msgid "Does this look right?"
 msgstr "¿Se ve bien así?"
@@ -1864,10 +1872,6 @@ msgstr "Los jugadores son obligatorios"
 msgid "Playing on {0}"
 msgstr "Reproduciendo en {0}"
 
-#: src/components/ios-install-prompt.tsx:47
-msgid "Please install FLXN • This will save me Twilio credits as you won't be signed out!"
-msgstr "Por favor instala FLXN • Así me ahorras créditos de Twilio porque no se cerrará tu sesión"
-
 #: src/features/tournaments/components/group-stage-view.tsx:314
 msgid "Populate Knockout Bracket"
 msgstr "Llenar el bracket eliminatorio"
@@ -2320,11 +2324,11 @@ msgstr "T"
 msgid "Tap an opponent below to compare"
 msgstr "Toca un oponente abajo para comparar"
 
-#: src/components/ios-install-prompt.tsx:37
+#: src/components/ios-install-prompt.tsx:44
 msgid "Tap Menu (⋮) → Add to Home screen"
 msgstr "Toca Menú (⋮) → Agregar a pantalla de inicio"
 
-#: src/components/ios-install-prompt.tsx:36
+#: src/components/ios-install-prompt.tsx:43
 msgid "Tap Share → Add to Home Screen"
 msgstr "Toca Compartir → Agregar a pantalla de inicio"
 

src/locales/ja/messages.po

@@ -392,6 +392,10 @@ msgstr "アクティビティ"
 msgid "Activity Details"
 msgstr "アクティビティの詳細"
 
+#: src/components/ios-install-prompt.tsx:61
+msgid "Add FLXN to your home screen — smoother experience, always one tap away"
+msgstr "FLXNをホーム画面に追加。もっと快適に使えて、いつでもワンタップで開けます"
+
 #: src/features/tournaments/components/edit-enrolled-players.tsx:117
 msgid "Add Player"
 msgstr "プレイヤーを追加"
@@ -841,6 +845,10 @@ msgstr "転送操作にはdeviceIdが必要です"
 msgid "Disconnect Spotify"
 msgstr "Spotifyの連携を解除"
 
+#: src/components/ios-install-prompt.tsx:68
+msgid "Dismiss"
+msgstr "閉じる"
+
 #: src/features/bracket/components/match-report.tsx:159
 msgid "Does this look right?"
 msgstr "これで合っていますか?"
@@ -1864,10 +1872,6 @@ msgstr "プレイヤーの選択が必要です"
 msgid "Playing on {0}"
 msgstr "{0}で再生中"
 
-#: src/components/ios-install-prompt.tsx:47
-msgid "Please install FLXN • This will save me Twilio credits as you won't be signed out!"
-msgstr "FLXNをインストールしてください • ログアウトされなくなるので、Twilioのクレジット節約になります!"
-
 #: src/features/tournaments/components/group-stage-view.tsx:314
 msgid "Populate Knockout Bracket"
 msgstr "ノックアウトブラケットを作成"
@@ -2320,11 +2324,11 @@ msgstr "T"
 msgid "Tap an opponent below to compare"
 msgstr "下の対戦相手をタップして比較"
 
-#: src/components/ios-install-prompt.tsx:37
+#: src/components/ios-install-prompt.tsx:44
 msgid "Tap Menu (⋮) → Add to Home screen"
 msgstr "メニュー (⋮) をタップ →「ホーム画面に追加」"
 
-#: src/components/ios-install-prompt.tsx:36
+#: src/components/ios-install-prompt.tsx:43
 msgid "Tap Share → Add to Home Screen"
 msgstr "共有をタップ →「ホーム画面に追加」"