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/pages/PlayNextPage.jsx

@@ -9,6 +9,7 @@ import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
 import {Skeleton} from '@/components/ui/skeleton';
 import GameCover from '../components/GameCover.jsx';
+import FitText from '../components/FitText.jsx';
 import PageContainer from '../components/PageContainer.jsx';
 import {saveGameStatus} from '../utils/backlog.js';
 import {formatPlaytime} from '../utils/games.js';
@@ -210,8 +211,8 @@ function PickCard({game}) {
                 <GameCover appid={game.appid} imageUrl={game.imageUrl} className="w-full"/>
             </Link>
             <div className="flex flex-1 flex-col gap-3 px-4 pb-4">
-                <Link to={`/library/${game.appid}`} className="font-semibold hover:text-primary transition-colors">
-                    {game.name ?? `App ${game.appid}`}
+                <Link to={`/library/${game.appid}`} className="@container block min-w-0 font-semibold hover:text-primary transition-colors">
+                    <FitText text={game.name ?? `App ${game.appid}`}/>
                 </Link>
                 <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
                     {game.timeToBeatMinutes > 0 && (