fix(layout): fit names on phones without sideways scroll

Display and game names shrink to 0.875rem, then end with an ellipsis
(FitText + fit-text utility, CSS container units, full text in title).
Rows and buttons wrap at large fonts, header points chip can shrink.
Guard: scripts/check-overflow.js.

src/components/AppHeader.jsx

@@ -123,14 +123,14 @@ export default function AppHeader({isAuthenticated, onLogout}) {
                     </nav>
                 )}
 
-                <div className="ml-auto flex items-center gap-1">
+                <div className="ml-auto flex min-w-0 items-center gap-1">
                     {/* Below md the badge hangs on the header's bottom edge: in the row it would push the page sideways. */}
                     {isAuthenticated && viewingAs && (
                         <Badge variant="secondary" className="max-md:absolute max-md:top-full max-md:left-1/2 max-md:-translate-x-1/2 max-md:-translate-y-1/2 max-md:pointer-events-none max-md:border-border md:mr-1">{t('NAV.VIEW_AS.BADGE', {role: t(`ROLES.${viewingAs}`)})}</Badge>
                     )}
                     {isAuthenticated && wallet && (
-                        <Button asChild variant="ghost" size="sm" title={t('POINTS.TITLE')}>
-                            <Link to="/points"><Coins className="text-primary"/><span className="tabular-nums">{wallet.balance}</span></Link>
+                        <Button asChild variant="ghost" size="sm" title={`${t('POINTS.TITLE')}: ${wallet.balance}`} className="min-w-0 shrink">
+                            <Link to="/points"><Coins className="text-primary"/><span className="min-w-0 truncate tabular-nums">{wallet.balance}</span></Link>
                         </Button>
                     )}
                     {isAuthenticated ? (