Public Access
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.
This commit is contained in:
1 parent
04387fcd0c
commit
d7810fbf94
37 files changed
+263
-79
No files matched your search
@@ -7,6 +7,7 @@ import {Button} from '@/components/ui/button';
|
||||
import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle} from '@/components/ui/dialog';
|
||||
import {Input} from '@/components/ui/input';
|
||||
import GameCover from './GameCover.jsx';
|
||||
import FitText from './FitText.jsx';
|
||||
import {linkGames, requestLink, searchOwnGames} from '../utils/links.js';
|
||||
import {MAX_LIBRARY_SEARCH_LENGTH} from '../utils/limits.js';
|
||||
import {platformLabel} from '../utils/platforms.js';
|
||||
@@ -112,7 +113,7 @@ export default function LinkGameDialog({game, open, onOpenChange, auditor, onDon
|
||||
<button type="button" onClick={() => setPicked(hit)}
|
||||
className="flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-muted/50">
|
||||
<GameCover appid={hit.appid} imageUrl={hit.imageUrl} className="w-16 shrink-0"/>
|
||||
<span className="min-w-0 flex-1 truncate text-sm font-medium">{hit.name}</span>
|
||||
<span className="@container min-w-0 flex-1 text-sm font-medium"><FitText text={hit.name}/></span>
|
||||
{platformLabel(hit) && (
|
||||
<span className="text-xs text-muted-foreground">{platformLabel(hit)}</span>
|
||||
)}
|
||||
|
||||
Reference in new issue
Block a user