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 {toast} from 'sonner';
|
||||
import {Button} from '@/components/ui/button';
|
||||
import {Card} from '@/components/ui/card';
|
||||
import GameStatusBadge from './GameStatusBadge.jsx';
|
||||
import FitText from './FitText.jsx';
|
||||
import {unlinkGame} from '../utils/links.js';
|
||||
import {platformLabel} from '../utils/platforms.js';
|
||||
|
||||
@@ -44,9 +45,9 @@ export default function EditionsCard({game, auditor, onRequest, onChanged}) {
|
||||
<p className="font-medium">{t('LINKS.ALSO_IN_LIBRARY')}</p>
|
||||
<ul className="space-y-1">
|
||||
{game.editions.map((edition) => (
|
||||
<li key={edition.appid} className="flex flex-wrap items-center gap-2">
|
||||
<Link to={`/library/${edition.appid}`} className="hover:text-primary hover:underline">
|
||||
{edition.name}
|
||||
<li key={edition.appid} className="@container flex flex-wrap items-center gap-2">
|
||||
<Link to={`/library/${edition.appid}`} className="min-w-0 max-w-full hover:text-primary hover:underline">
|
||||
<FitText text={edition.name}/>
|
||||
</Link>
|
||||
{platformLabel(edition) && (
|
||||
<span className="text-muted-foreground">({platformLabel(edition)})</span>
|
||||
|
||||
Reference in new issue
Block a user