Skip to content

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

Closed
NicoRuedaA wants to merge 3 commits into
OpenLeagueManager:developfrom
NicoRuedaA:fix/responsive-ui
Closed

fix(ui): make layout responsive across all desktop resolutions (960px to ultrawide)#243
NicoRuedaA wants to merge 3 commits into
OpenLeagueManager:developfrom
NicoRuedaA:fix/responsive-ui

Conversation

@NicoRuedaA

Copy link
Copy Markdown
Contributor

Approved issue

Closes #220

  • The linked issue has status:approved.
  • This PR targets development unless it is a maintainer release/hotfix PR.
  • This PR has exactly one type:* label.

Summary

  • Fix viewport meta tag: replaced hardcoded width=1366 lock with width=device-width, initial-scale=1.0, removed maximum-scale=1.0, user-scalable=no to allow proper window resize behavior on desktop.
  • Added --text-2xs: 0.625rem custom token to Tailwind theme — enables rem-based font scaling for dense UI text that was previously hardcoded in pixels.
  • Table overflow protection: Wrapped 7 tables across ManagerTab, TeamProfileHistoryCard, YouthAcademyTab, TournamentsTab, and SubPanel in overflow-x-auto to prevent horizontal clipping at narrow window sizes.
  • Text size normalization: Replaced 342+ hardcoded text-[Npx] values across 63 components with proper rem-based Tailwind tokens (text-2xs, text-xs, text-sm, text-base, text-xl, text-2xl, text-3xl, text-4xl, text-5xl). This ensures text scales correctly with the user''s ui_scale setting.
  • Min-width normalization: Replaced hardcoded min-w-[Npx] with theme tokens in ChampionsTab, PlayoffBracketBoard, ChampionsGrid, SquadRosterView, and ScheduleCalendarView.
  • SubPanel modal fix: Changed w-[1100px] to max-w-[1100px] w-[95vw] so the substitution modal fits within the 960px minimum window.
  • High-resolution container expansion: Changed 22 main content wrappers from fixed max-w-* to w-[92%] max-w-[2000px] mx-auto — containers now expand proportionally on QHD (2560px), 4K, and ultrawide displays instead of leaving 50%+ empty margins.
  • Grid column scaling: Added 2xl: breakpoints to HomeTab, FinancesTab, TrainingTab, and ManagerTab grids so they show more columns on larger screens (e.g., 2xl:grid-cols-4 at 1536px+).
  • ChampionDraft outer layout: Added responsive breakpoints (2xl:grid-cols-20, lg:w-[280px] xl:w-[300px] panels, max-w-[2000px] 2xl:max-w-[90vw] container) to the 3355-line draft screen — outer layout only, zero internal logic touched. compactTier verified: no clipping at 960px minimum window.
  • Ultrawide readability: Capped content width at 2000px to prevent excessive line lengths on 3440px+ monitors.

Key stats

Metric Value
Files modified 75
Lines changed +802 / -664
text-[Npx] replacements 342+ in 63 components
Containers expanded 22 wrappers
Table overflow wrappers 7
Grid 2xl: breakpoints 5 components
Tests 655 passed, 0 failed

Checks run

Required/stable PR checks are intentionally lightweight and production-build-free:

  • frontend-install passed (dependency installation validation).
  • rust-check passed (cargo fmt --check and cargo check).
  • Not applicable locally; docs/templates only.

Manual/experimental full checks are available for maintainer-requested validation and current debt tracking:

  • frontend-full-experimental (npm test, npm run build:types).
  • rust-full-experimental (cargo clippy --workspace --all-targets -- -D warnings, cargo test --workspace).

Do not mark the experimental full checks as required for this PR unless a maintainer explicitly asks.

Documentation and provenance

  • Documentation was updated or no docs change is needed.
  • Data provenance was updated or no provenance change is needed.
  • No unclear third-party data, generated cache, secret, signing key, or private credential is included.

Release impact

  • Changelog entry added or not needed.
  • Version changes are synchronized across package.json, src-tauri/Cargo.toml, and src-tauri/tauri.conf.json when applicable.

… to ultrawide)

- Fix viewport meta: remove hardcoded width=1366 lock
- Add text-2xs (0.625rem) token for proper rem-based font scaling
- Wrap tables in overflow-x-auto to prevent horizontal clipping
- Replace all text-[Npx] with rem-based Tailwind tokens (342 replacements)
- Replace hardcoded min-w-[Npx] with theme tokens
- Expand containers proportionally (w-[92%] max-w-[2000px]) at >1920px
- Add 2xl: grid breakpoints for multi-column layouts on large screens
- Add responsive breakpoints to ChampionDraft outer containers
- CompactTier verified: no clipping at 960px minimum window

Closes #220
@NicoRuedaA
NicoRuedaA changed the base branch from main to develop May 13, 2026 16:14
@NicoRuedaA NicoRuedaA closed this May 13, 2026
aalonsolopez pushed a commit that referenced this pull request May 18, 2026
…sponsive-ui

Integrates PR #243 responsive UI changes from fix/responsive-ui into a 0.2.1-based branch. Includes: replace hardcoded text-[Npx] with Tailwind tokens, container expansion for ultrawide displays, grid column scaling at 2xl+ breakpoints, table overflow protection (overflow-x-auto), normalized container widths, and 15 merge conflict resolutions between main and develop code paths.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix: UI not reposnive

1 participant