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

@@ -8,6 +8,7 @@ import {Badge} from '@/components/ui/badge';
 import {Button} from '@/components/ui/button';
 import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
 import GameCover from '../components/GameCover.jsx';
+import FitText from '../components/FitText.jsx';
 import PageContainer from '../components/PageContainer.jsx';
 import {dismissPair, fetchLinkQueue, linkGames} from '../utils/links.js';
 
@@ -17,7 +18,7 @@ function PairGame({game}) {
     return (
         <Link to={`/library/${game.appid}`} className="flex min-w-0 flex-1 items-center gap-2 hover:text-primary">
             <GameCover appid={game.appid} imageUrl={game.imageUrl} className="w-16 shrink-0"/>
-            <span className="min-w-0 truncate text-sm font-medium">{game.name ?? `App ${game.appid}`}</span>
+            <span className="@container min-w-0 flex-1 text-sm font-medium"><FitText text={game.name ?? `App ${game.appid}`}/></span>
         </Link>
     );
 }