diff --git a/src/apps/epic/static/apps/epic/room.js b/src/apps/epic/static/apps/epic/room.js index 8d63733..56d4081 100644 --- a/src/apps/epic/static/apps/epic/room.js +++ b/src/apps/epic/static/apps/epic/room.js @@ -35,27 +35,38 @@ var rightInset = 0; var bottomInset = 0; - // Tray handle: portrait → vertical strip on right; landscape → horizontal at bottom + var isLandscape = vw > vh; + + // Tray handle: portrait → vertical strip on right; landscape → tray is easily + // dismissed, so skip the bottomInset calculation (would over-shrink the modal). var trayHandle = document.getElementById('id_tray_handle'); - if (trayHandle) { + if (trayHandle && !isLandscape) { var hr = trayHandle.getBoundingClientRect(); - if (hr.width >= hr.height) { - // Landscape: handle spans the bottom - bottomInset = vh - hr.top; - } else { + if (hr.width < hr.height) { // Portrait: handle strips the right edge rightInset = vw - hr.left; } } - // Gear / kit buttons fixed at the right edge may protrude left of the tray handle + // Gear / kit buttons: update right inset if near right edge. + // In landscape they sit at bottom-right but are also dismissible — skip bottomInset. document.querySelectorAll('.room-page > .gear-btn').forEach(function (btn) { var br = btn.getBoundingClientRect(); if (br.right > vw - 30) { rightInset = Math.max(rightInset, vw - br.left); } + if (!isLandscape && br.bottom > vh - 30) { + bottomInset = Math.max(bottomInset, vh - br.top); + } }); + // Landscape: right clears gear/kit buttons (~4rem); bottom is fixed 60px for + // the kit-bag handle strip — tray is ignored so the stage has room to breathe. + if (isLandscape) { + rightInset = Math.max(rightInset, 64); // 4rem + bottomInset = 60; // kit-bag handle + } + overlay.style.paddingRight = rightInset + 'px'; overlay.style.paddingBottom = bottomInset + 'px'; diff --git a/src/static_src/scss/_applets.scss b/src/static_src/scss/_applets.scss index 8f6af18..6e98548 100644 --- a/src/static_src/scss/_applets.scss +++ b/src/static_src/scss/_applets.scss @@ -119,8 +119,8 @@ .room-page, .billboard-page { > .gear-btn { - right: calc(#{$sidebar-w} + 0.5rem); - bottom: 4.2rem; // same gap above kit btn as portrait; no page-specific overrides needed + right: 0.5rem; + bottom: 3.95rem; // same gap above kit btn as portrait; no page-specific overrides needed top: auto; } } diff --git a/src/static_src/scss/_game-kit.scss b/src/static_src/scss/_game-kit.scss index 1f98b2a..efcd803 100644 --- a/src/static_src/scss/_game-kit.scss +++ b/src/static_src/scss/_game-kit.scss @@ -4,8 +4,8 @@ right: 0.5rem; @media (orientation: landscape) and (max-width: 1440px) { - right: calc(4rem + 0.5rem); - bottom: 0.75rem; + right: 0.5rem; + bottom: 0.5rem; top: auto; } diff --git a/src/static_src/scss/_room.scss b/src/static_src/scss/_room.scss index be0e8e8..0d6ee11 100644 --- a/src/static_src/scss/_room.scss +++ b/src/static_src/scss/_room.scss @@ -1053,11 +1053,17 @@ html:has(.sig-backdrop) { } // ─── Sig select: landscape overrides ───────────────────────────────────────── -// Wider viewport → 2 rows of 9 cards; modal allowed to fill available width. +// Wider viewport → 2 rows of 9 cards; modal fills full available width. +// padding-left clears the fixed left navbar (JS sets right/bottom but not left). +// Grid margins reset to 0 — overlay padding handles all edge clearance in landscape. @media (orientation: landscape) { - .sig-modal { max-width: none; } - .sig-deck-grid { grid-template-columns: repeat(9, 1fr); } + .sig-overlay { padding-left: 4rem; } + .sig-modal { max-width: none; } + .sig-deck-grid { + grid-template-columns: repeat(9, 1fr); + margin: 0; + } } // ─── Seat tray — see _tray.scss ─────────────────────────────────────────────