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/AchievementsCard.jsx

@@ -4,6 +4,7 @@ import {Trophy} from 'lucide-react';
 
 import {Card} from '@/components/ui/card';
 import GameCover from './GameCover.jsx';
+import FitText from './FitText.jsx';
 
 /**
  * @param summary the answer of GET /api/library/achievements/summary
@@ -55,10 +56,10 @@ export default function AchievementsCard({summary}) {
                                     className="group flex items-center gap-3 rounded-lg p-1 transition-colors hover:bg-muted/50"
                                 >
                                     <GameCover appid={game.appid} imageUrl={game.imageUrl} className="w-16 shrink-0"/>
-                                    <div className="min-w-0 flex-1 space-y-1">
+                                    <div className="@container min-w-0 flex-1 space-y-1">
                                         <div className="flex items-baseline justify-between gap-2">
-                                            <span className="truncate text-sm font-medium group-hover:text-primary transition-colors">
-                                                {game.name ?? `App ${game.appid}`}
+                                            <span className="min-w-0 text-sm font-medium group-hover:text-primary transition-colors">
+                                                <FitText text={game.name ?? `App ${game.appid}`}/>
                                             </span>
                                             <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
                                                 {game.unlocked} / {game.total}