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

Merge pull request 'fix(client): responsive phone layout + clip overflowing drink names' (#4) from fix/3-phone-layout into main

Browse source 
Reviewed-on: https://forge.pr1ma.darkest.space/mara/wutzcalc/pulls/4
This commit is contained in:
mara 2026-06-29 19:45:44 +02:00
commit 8f5457dff2
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; }