vinzenz/wutzcalc
Watch
0
0
Fork
You've already forked wutzcalc
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(client): responsive phone layout + clip overflowing drink names

Browse source 
On narrow phone screens the tablet UI had two problems:
- Drink button text could overflow the tile (no overflow: hidden / word-break),
  causing garbled text spill visible in the issue screenshot.
- All font sizes and the cart height were tablet-sized (22px drinks, 56px total,
  38vh cart, 64px action buttons); no phone overrides existed beyond the 2-column
  grid switch.

Fixes:
- .drink: add overflow: hidden so text never bleeds outside the tile.
- .drink .name: word-break + overflow-wrap so long names wrap rather than clip.
- .topbar .bar-name: nowrap + text-overflow: ellipsis so a long bar name
  truncates cleanly rather than wrapping/overflowing.
- @media (max-width: 480px): scale down topbar (20px), drink tiles (17px),
  pfand label (12px), cart height (34vh), cart total (38px), action buttons
  (52px / 18px) to fit a portrait phone comfortably.

Closes #3.
This commit is contained in:
iris 2026-06-29 19:40:17 +02:00
commit 982f6a4c5f
1 changed files with 18 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

21
client/src/styles.css
View file

@ -93,9 +93,9 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
border-bottom: 1px solid var(--border-soft);
flex: 0 0 auto;
}
.topbar .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar .brand { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
.topbar .logo { flex: 0 0 auto; }
.topbar .bar-name { font-size: 26px; font-weight: 800; }
.topbar .bar-name { font-size: 26px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .change { font-size: 17px; padding: 10px 14px; }
/* Drink grid: 3 equal columns. Row height is DERIVED so exactly five equal
@ -119,6 +119,20 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
@media (max-width: 480px) {
.grid { grid-template-columns: repeat(2, 1fr); }
.topbar { padding: 8px 12px; }
.topbar .bar-name { font-size: 20px; }
.topbar .change { font-size: 15px; padding: 8px 10px; }
.drink { font-size: 17px; padding: 6px; }
.drink .price { font-size: 17px; }
.drink .pfand { font-size: 12px; }
.cart { flex: 0 0 34vh; padding: 6px 12px; }
.cart-line { font-size: 16px; }
.cart-total { font-size: 38px; padding: 2px 0 6px; }
.actions button { height: 52px; font-size: 18px; }
}
.drink {
@ -129,8 +143,9 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
text-align: center;
padding: 8px;
font-size: 22px;
overflow: hidden;
}
.drink .name { font-weight: 800; line-height: 1.15; }
.drink .name { font-weight: 800; line-height: 1.15; max-width: 100%; word-break: break-word; overflow-wrap: break-word; }
.drink .price { font-size: 22px; font-weight: 700; margin-top: 6px; }
.drink .pfand { font-size: 15px; font-weight: 600; color: var(--pfand); margin-top: 2px; }