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

@@ -17,6 +17,7 @@ import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/c
 import {Skeleton} from '@/components/ui/skeleton';
 import AddGamePanel from '../components/AddGamePanel.jsx';
 import GameCover from '../components/GameCover.jsx';
+import FitText from '../components/FitText.jsx';
 import LibraryTabs from '../components/LibraryTabs.jsx';
 import GameStatusBadge from '../components/GameStatusBadge.jsx';
 import PageContainer from '../components/PageContainer.jsx';
@@ -302,8 +303,8 @@ export default function GameLibrary() {
                                 >
                                     <GameCover appid={g.appid} imageUrl={g.imageUrl} fx={coverEffect(equipped, g.status)}
                                                className="w-16 sm:w-24 shrink-0"/>
-                                    <span className="min-w-0 flex-1 truncate font-medium group-hover:text-primary transition-colors">
-                                        {g.name ?? `App ${g.appid}`}
+                                    <span className="@container min-w-0 flex-1 font-medium group-hover:text-primary transition-colors">
+                                        <FitText text={g.name ?? `App ${g.appid}`}/>
                                     </span>
                                     {platformLabel(g) && (
                                         <Badge variant="outline" className="hidden sm:inline-flex" title={platformLabel(g)}>