Skip to content

fix(ui): make layout responsive across all desktop resolutions (960px to ultrawide) #245

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aalonsolopez merged 6 commits into from
May 18, 2026
Merged

fix(ui): make layout responsive across all desktop resolutions (960px to ultrawide) #245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
10d6bbb
fix(ui): make layout responsive across all desktop resolutions (960px…
NicoRuedaA May 13, 2026
6fb17d6
fix(db): correct team upsert column/value mismatch (47 columns, 47 va…
NicoRuedaA May 13, 2026
6e0a8e0
fix(ui): repair broken JSX in SubPanel from overflow-x-auto insertion
NicoRuedaA May 13, 2026
0d4eecf
merge(fix/responsive-ui): merge responsive layout fixes into 0.2.1-re…
NicoRuedaA May 13, 2026
3245f9f
Merge branch 'develop' into 0.2.1-responsive-ui
NicoRuedaA May 13, 2026
dc7254e
Merge branch 'develop' into 0.2.1-responsive-ui
aalonsolopez May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<link rel="icon" type="image/png" href="/images/DISCORD.png" />
<meta
name="viewport"
content="width=1366, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>
<title>Open League Manager</title>
</head>
Expand Down
1 change: 1 addition & 0 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
/* Typography */
--font-sans: "Inter", "Avenir", "Helvetica", "Arial", sans-serif;
--font-heading: "Barlow Condensed", "Inter", "Arial Narrow", sans-serif;
--text-2xs: 0.625rem;

/* Primary: Emerald Green */
--color-primary-50: #ecfdf5;
Expand Down
4 changes: 2 additions & 2 deletions src/components/EndOfSeasonScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export default function EndOfSeasonScreen({ gameState, onGameUpdate }: EndOfSeas
};

return (
<div className="max-w-4xl mx-auto py-8 px-4">
<div className="w-[92%] max-w-[2000px] mx-auto py-8 px-4">
{step === "review" && (
<>
{/* Hero */}
Expand Down Expand Up @@ -129,7 +129,7 @@ export default function EndOfSeasonScreen({ gameState, onGameUpdate }: EndOfSeas
<p className="text-xs font-heading font-bold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-1">
{userTeam?.name}
</p>
<p className="text-[11px] font-heading font-bold uppercase tracking-widest text-primary-500 mb-4">
<p className="text-xs font-heading font-bold uppercase tracking-widest text-primary-500 mb-4">
{t("endOfSeason.regularPhaseSummary")}
</p>
<div className="flex items-center justify-center gap-6 mb-4">
Expand Down
6 changes: 3 additions & 3 deletions src/components/NegotiationFeedbackPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default function NegotiationFeedbackPanel({
>
<div className="flex items-center justify-between gap-3">
<div>
<p className="text-[11px] font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
<p className="text-xs font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
{t(titleKey)}
</p>
<p className="text-sm font-medium text-gray-900 dark:text-gray-100 mt-1">
Expand Down Expand Up @@ -70,13 +70,13 @@ export default function NegotiationFeedbackPanel({

<div className="grid grid-cols-2 gap-3">
<div className="space-y-1">
<p className="text-[11px] font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
<p className="text-xs font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
{t(patienceKey)}
</p>
<ProgressBar value={feedback.patience} variant="success" size="md" showLabel />
</div>
<div className="space-y-1">
<p className="text-[11px] font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
<p className="text-xs font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
{t(tensionKey)}
</p>
<ProgressBar value={feedback.tension} variant="danger" size="md" showLabel />
Expand Down
2 changes: 1 addition & 1 deletion src/components/NextMatchDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ export default function NextMatchDisplay({
<div className="flex items-center justify-end">
<div className="px-2.5 py-1 rounded-md bg-navy-900/70 border border-navy-600 text-right">
<p className="font-heading font-bold text-gray-100 text-base leading-none">{countdown}d</p>
<p className="text-[10px] text-gray-400 leading-none mt-1">
<p className="text-2xs text-gray-400 leading-none mt-1">
{t("home.daysUntilMatch")}
</p>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/TraitBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ export function TraitBadge({ trait: traitName, size = "sm" }: { trait: string; s
if (!meta) return null;

const sizeClasses = size === "xs"
? "text-[9px] px-1.5 py-0.5 gap-0.5"
: "text-[10px] px-2 py-0.5 gap-1";
? "text-2xs px-1.5 py-0.5 gap-0.5"
: "text-2xs px-2 py-0.5 gap-1";

return (
<span
Expand All @@ -70,7 +70,7 @@ export function TraitList({ traits, size = "sm", max }: { traits: string[]; size
<div className="flex flex-wrap gap-1">
{displayed.map(t => <TraitBadge key={t} trait={t} size={size} />)}
{remaining > 0 && (
<span className="text-[10px] text-gray-500 font-heading self-center">+{remaining}</span>
<span className="text-2xs text-gray-500 font-heading self-center">+{remaining}</span>
)}
</div>
);
Expand Down
30 changes: 15 additions & 15 deletions src/components/champions/ChampionsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -432,8 +432,8 @@ export default function ChampionsTab({ gameState, onGameUpdate, onViewChampion }
<section className="rounded-2xl border border-navy-600 bg-navy-700 p-5">
<div className="flex flex-wrap items-start justify-between gap-4">
<div>
<p className="text-[11px] uppercase tracking-widest text-gray-400 font-heading">
{t("champions.patchLabel")}
<p className="text-xs uppercase tracking-widest text-gray-400 font-heading">
{t("champions.patchLabel", "Patch")}
</p>
<h2 className="mt-1 text-2xl font-heading font-bold text-white">
{patch?.current_patch_label || t("champions.patchFallback")}
Expand All @@ -448,7 +448,7 @@ export default function ChampionsTab({ gameState, onGameUpdate, onViewChampion }
</p>
</div>

<div className="min-w-[230px] rounded-xl border border-navy-600 bg-navy-800/30 px-4 py-3">
<div className="min-w-56 rounded-xl border border-navy-600 bg-navy-800/30 px-4 py-3">
<div className="flex items-center justify-between text-xs text-gray-300">
<span className="inline-flex items-center gap-1"><Search className="h-3.5 w-3.5" />
{t("champions.discoveryProgress")}</span>
Expand All @@ -457,8 +457,8 @@ export default function ChampionsTab({ gameState, onGameUpdate, onViewChampion }
<div className="mt-2 h-2 rounded-full bg-navy-700">
<div className="h-2 rounded-full bg-primary-500" style={{ width: `${discoveredPct}%` }} />
</div>
<p className="mt-2 text-[11px] text-gray-400">
{t("champions.staffMetaImpact")}: {formatStaffEffectPercent(staffEffects.metaDiscovery)} · {t("champions.staffMasteryImpact")}: {formatStaffEffectPercent(staffEffects.development)}
<p className="mt-2 text-xs text-gray-400">
{t("champions.staffMetaImpact", "Scout read")}: {formatStaffEffectPercent(staffEffects.metaDiscovery)} · {t("champions.staffMasteryImpact", "mastery learning")}: {formatStaffEffectPercent(staffEffects.development)}
</p>
</div>
</div>
Expand All @@ -473,7 +473,7 @@ export default function ChampionsTab({ gameState, onGameUpdate, onViewChampion }
<button
type="button"
onClick={() => setMetaRoleFilter("ALL")}
className={`rounded-md border px-2 py-1 text-[11px] font-heading transition-colors ${metaRoleFilter === "ALL" ? "border-primary-500 bg-primary-500 text-white" : "border-navy-600 text-gray-300 hover:border-navy-500"}`}
className={`rounded-md border px-2 py-1 text-xs font-heading transition-colors ${metaRoleFilter === "ALL" ? "border-primary-500 bg-primary-500 text-white" : "border-navy-600 text-gray-300 hover:border-navy-500"}`}
>
{t("common.all")}
</button>
Expand Down Expand Up @@ -625,16 +625,16 @@ export default function ChampionsTab({ gameState, onGameUpdate, onViewChampion }
</div>
<div className="flex items-center gap-3">
<div className="text-right">
<p className={`text-[11px] font-heading uppercase tracking-wide ${soloQTierClass(soloQ.tier)}`}>
<p className={`text-xs font-heading uppercase tracking-wide ${soloQTierClass(soloQ.tier)}`}>
{soloQ.tier}
</p>
<p className="text-[11px] text-gray-100 font-semibold">
<p className="text-xs text-gray-100 font-semibold">
{soloQ.lp} LP
<span className={`ml-1 ${soloQ.delta >= 0 ? "text-emerald-300" : "text-rose-300"}`}>
{soloQ.delta >= 0 ? `+${soloQ.delta}` : soloQ.delta}
</span>
</p>
<p className="text-[10px] text-gray-300">x{soloQMult.toFixed(1)} mastery</p>
<p className="text-2xs text-gray-300">x{soloQMult.toFixed(1)} mastery</p>
</div>
<img
src={soloQEmblemUrl(soloQ.tier)}
Expand Down Expand Up @@ -668,18 +668,18 @@ export default function ChampionsTab({ gameState, onGameUpdate, onViewChampion }
>
<div className="mb-2 flex items-start justify-between gap-2">
<div>
<p className="text-[10px] font-heading uppercase tracking-wider text-gray-400">
<p className="text-2xs font-heading uppercase tracking-wider text-gray-400">
P{slotIndex + 1}
</p>
<p className="font-heading text-xs font-bold uppercase tracking-wider text-gray-200">
{slotTitle}
</p>
</div>
<p className={`text-[10px] font-heading uppercase tracking-wide ${gainHint.className}`}>
<p className={`text-2xs font-heading uppercase tracking-wide ${gainHint.className}`}>
{t("champions.gain")} {gainHint.label}
</p>
</div>
<p className="mb-2 text-[11px] text-gray-400">{slotDesc}</p>
<p className="mb-2 text-xs text-gray-400">{slotDesc}</p>

<select
value={target}
Expand Down Expand Up @@ -710,13 +710,13 @@ export default function ChampionsTab({ gameState, onGameUpdate, onViewChampion }
/>
</div>
<div className="mt-2 flex flex-wrap gap-2">
<span className="text-[10px] font-heading uppercase tracking-wider text-gray-400">
<span className="text-2xs font-heading uppercase tracking-wider text-gray-400">
{t("champions.mastery")} {masteryValue}
</span>
<span className="text-[10px] font-heading uppercase tracking-wider text-gray-400">
<span className="text-2xs font-heading uppercase tracking-wider text-gray-400">
{t("training.effectiveFocus")} x{gainHint.baseMult.toFixed(2)}
</span>
<span className="text-[10px] font-heading uppercase tracking-wider text-gray-400">
<span className="text-2xs font-heading uppercase tracking-wider text-gray-400">
SoloQ x{soloQMult.toFixed(1)}
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/dashboard/DashboardBlockerModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export default function DashboardBlockerModal({
<p className={getBlockerTextClassName(blocker.severity)}>
{blocker.text}
</p>
<p className="mt-1 text-[10px] font-heading uppercase tracking-widest text-gray-400">
<p className="mt-1 text-2xs font-heading uppercase tracking-widest text-gray-400">
{t("notifications.goTo")} {blocker.tab} →
</p>
</button>
Expand Down
6 changes: 3 additions & 3 deletions src/components/dashboard/DashboardSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ function NavItem({
<span
className={
collapsed
? "absolute right-1.5 top-1.5 min-w-[1.1rem] rounded-full bg-primary-500 px-1.5 py-0.5 text-center text-[10px] font-bold text-white"
? "absolute right-1.5 top-1.5 min-w-[1.1rem] rounded-full bg-primary-500 px-1.5 py-0.5 text-center text-2xs font-bold text-white"
: "min-w-5 rounded-full bg-primary-500 px-2 py-0.5 text-center text-xs font-bold text-white"
}
>
Expand Down Expand Up @@ -279,7 +279,7 @@ export default function DashboardSidebar({
{!isUnemployed && (
<>
{collapsed ? null : (
<p className="text-[10px] text-gray-500 uppercase tracking-widest font-heading px-3 pt-3 pb-1">
<p className="text-2xs text-gray-500 uppercase tracking-widest font-heading px-3 pt-3 pb-1">
{t("dashboard.sectionClub")}
</p>
)}
Expand All @@ -297,7 +297,7 @@ export default function DashboardSidebar({
)}

{collapsed ? null : (
<p className="text-[10px] text-gray-500 uppercase tracking-widest font-heading px-3 pt-3 pb-1">
<p className="text-2xs text-gray-500 uppercase tracking-widest font-heading px-3 pt-3 pb-1">
{t("dashboard.sectionWorld")}
</p>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/finances/FinancesTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,7 @@ export default function FinancesTab({
];

return (
<div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-5">
<div className="w-[92%] max-w-[2000px] mx-auto grid grid-cols-1 lg:grid-cols-3 2xl:grid-cols-4 gap-5">
{/* Financial overview */}
<Card accent="accent" className="lg:col-span-2">
<CardHeader>{t("finances.overview")}</CardHeader>
Expand Down
6 changes: 3 additions & 3 deletions src/components/home/HomeLatestNewsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,13 @@ export default function HomeLatestNewsCard({
</p>
{article.match_score && (
<div className="flex items-center gap-1.5 mt-1">
<span className="text-[10px] text-gray-500 dark:text-gray-400">
<span className="text-2xs text-gray-500 dark:text-gray-400">
{getTeamName(teams, article.match_score.home_team_id)}
</span>
<span className="text-[10px] font-heading font-bold text-primary-500">
<span className="text-2xs font-heading font-bold text-primary-500">
{article.match_score.home_goals}-{article.match_score.away_goals}
</span>
<span className="text-[10px] text-gray-500 dark:text-gray-400">
<span className="text-2xs text-gray-500 dark:text-gray-400">
{getTeamName(teams, article.match_score.away_team_id)}
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/home/HomeLeagueDigestCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function HomeLeagueDigestCard({
<Badge variant="neutral" size="sm">
{t(`news.categories.${article.category}`)}
</Badge>
<span className="text-[10px] text-gray-400 dark:text-gray-500">
<span className="text-2xs text-gray-400 dark:text-gray-500">
{formatDateShort(article.date, lang)} - {article.source}
</span>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/home/HomeLeaguePositionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export default function HomeLeaguePositionCard({
? t("home.nextMatch")
: t("schedule.lastResult")}
</Badge>
<span className="text-[10px] font-heading font-bold uppercase tracking-wider text-cyan-300/90">
<span className="text-2xs font-heading font-bold uppercase tracking-wider text-cyan-300/90">
{t("schedule.round", {
number: spotlightFixture.matchday,
})}
Expand Down Expand Up @@ -167,7 +167,7 @@ export default function HomeLeaguePositionCard({
return (
<div
key={entry.team_id}
className={`grid grid-cols-[18px_1fr_24px_24px_44px] items-center gap-2 rounded px-2 py-1 text-[11px] ${isMine ? "bg-cyan-500/10 border border-cyan-400/30" : "bg-gray-50 dark:bg-navy-800/40"}`}
className={`grid grid-cols-[18px_1fr_24px_24px_44px] items-center gap-2 rounded px-2 py-1 text-xs ${isMine ? "bg-cyan-500/10 border border-cyan-400/30" : "bg-gray-50 dark:bg-navy-800/40"}`}
>
<span className={`font-heading font-black ${isMine ? "text-cyan-300" : "text-gray-500 dark:text-gray-400"}`}>
{index + 1}
Expand Down
2 changes: 1 addition & 1 deletion src/components/home/HomeNextOpponentCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export default function HomeNextOpponentCard({
{nextOpponent.recentForm.map((result, index) => (
<span
key={`${nextOpponent.opponent.id}-${index}`}
className={`w-6 h-6 rounded flex items-center justify-center text-[10px] font-heading font-bold text-white ${
className={`w-6 h-6 rounded flex items-center justify-center text-2xs font-heading font-bold text-white ${
result === "W"
? "bg-green-500"
: result === "L"
Expand Down
4 changes: 2 additions & 2 deletions src/components/home/HomePlayerMomentumCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default function HomePlayerMomentumCard({
<div>
<div className="flex items-center gap-1.5 mb-2">
<TrendingUp className="w-3.5 h-3.5 text-green-500" />
<span className="text-[10px] font-heading font-bold uppercase tracking-widest text-green-500">
<span className="text-2xs font-heading font-bold uppercase tracking-widest text-green-500">
{t("home.inForm")}
</span>
</div>
Expand Down Expand Up @@ -70,7 +70,7 @@ export default function HomePlayerMomentumCard({
<div>
<div className="flex items-center gap-1.5 mb-2">
<TrendingDown className="w-3.5 h-3.5 text-red-500" />
<span className="text-[10px] font-heading font-bold uppercase tracking-widest text-red-500">
<span className="text-2xs font-heading font-bold uppercase tracking-widest text-red-500">
{t("home.lowMorale")}
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/home/HomeRecentMessagesCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export default function HomeRecentMessagesCard({
{message.body}
</p>
</div>
<span className="text-[10px] text-gray-400 dark:text-gray-500 flex-shrink-0 mt-1">
<span className="text-2xs text-gray-400 dark:text-gray-500 flex-shrink-0 mt-1">
{formatDateShort(message.date, lang)}
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/home/HomeRecentResultsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function HomeRecentResultsCard({
className="flex items-center px-4 py-2.5 gap-3"
>
<span
className={`w-5 h-5 rounded flex items-center justify-center text-[9px] font-heading font-bold text-white flex-shrink-0 ${
className={`w-5 h-5 rounded flex items-center justify-center text-2xs font-heading font-bold text-white flex-shrink-0 ${
result.resultCode === "W"
? "bg-green-500"
: result.resultCode === "L"
Expand Down
Loading