Skip to content

Commit a513501

Browse files
committed
Fix responsive layout for narrow phones and landscape mode
- Fleet building: cap max-width to viewport width on narrow screens - Transfer panel: use min(180px, 35vh) to adapt to short viewports - Landscape: compact HUD bar padding, font, gap, and button height when viewport height is under 560px
1 parent bd38587 commit a513501

File tree

2 files changed

+24
-6
lines changed

2 files changed

+24
-6
lines changed

docs/PLAYABILITY.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ Resize to 375x812 or use a phone:
3838
8. **Touch language** — status messages say "Tap" not "Click", no "(Enter)" hints
3939
9. **Burn markers** — direction circles have no 1-6 number labels
4040
10. **Help overlay** — shows "Tap ship/arrow/enemy", no keyboard shortcuts
41+
11. **Landscape** — rotate to landscape; HUD bars compact, canvas area usable
4142

4243
## Combat Test (2 minutes)
4344

static/style.css

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1442,6 +1442,27 @@ body::before {
14421442
}
14431443

14441444
@media (max-height: 560px) {
1445+
.hud-bar {
1446+
padding: 0.25rem 0.6rem;
1447+
gap: 0.1rem 0.5rem;
1448+
font-size: 0.62rem;
1449+
}
1450+
1451+
.hud-bottom {
1452+
bottom: calc(0.4rem + var(--safe-bottom));
1453+
gap: 0.3rem;
1454+
}
1455+
1456+
.hud-bottom .btn {
1457+
min-height: 40px;
1458+
font-size: 0.7rem;
1459+
}
1460+
1461+
.status-msg {
1462+
padding: 0.3rem 0.6rem;
1463+
font-size: 0.7rem;
1464+
}
1465+
14451466
.ship-list {
14461467
top: auto;
14471468
bottom: calc(var(--hud-bottom-offset) + 0.35rem);
@@ -1455,10 +1476,6 @@ body::before {
14551476
max-height: min(25vh, 140px);
14561477
}
14571478

1458-
.hud-bottom {
1459-
bottom: calc(0.55rem + var(--safe-bottom));
1460-
}
1461-
14621479
.help-btn {
14631480
top: calc(var(--hud-top-offset) + 0.25rem);
14641481
bottom: auto;
@@ -1478,7 +1495,7 @@ body::before {
14781495

14791496
/* Fleet building */
14801497
.fleet-building-content {
1481-
max-width: 28rem;
1498+
max-width: min(28rem, calc(100vw - 2.5rem));
14821499
max-height: 90vh;
14831500
overflow-y: auto;
14841501
}
@@ -1686,7 +1703,7 @@ body::before {
16861703
/* Logistics Transfer Panel */
16871704
.transfer-panel {
16881705
padding: 6px 10px;
1689-
max-height: 180px;
1706+
max-height: min(180px, 35vh);
16901707
overflow-y: auto;
16911708
}
16921709
.transfer-pair {

0 commit comments

Comments
 (0)