vinzenz/wutzcalc
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tablet: fit grid and cart on screen, no scrolling

Browse source
This commit is contained in:
müde 2026-05-19 18:14:14 +02:00
parent e0898bea22
commit 1442fbae75
2 changed files with 42 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

26
client/src/styles.css
View file

@ -31,6 +31,7 @@ button:disabled { opacity: 0.4; }
flex-direction: column;
height: 100%;
max-width: 100vw;
overflow: hidden;
}
.bar-picker {
@ -61,18 +62,18 @@ button:disabled { opacity: 0.4; }
.topbar .bar-name { font-size: 20px; font-weight: bold; }
.topbar .change { font-size: 14px; padding: 8px 12px; }
/* Square-ish drink buttons, sized to fit a portrait tablet width.
3 columns on a typical portrait iPad (~768px) gives ~240px-wide tiles. */
/* Drink grid fills available space with no scrolling — tiles auto-size to fit.
3 columns on portrait iPad (~768px); rows divide the remaining height equally. */
.grid {
flex: 1 1 auto;
flex: 1 1 0;
min-height: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: 8px;
padding: 8px;
overflow-y: auto;
align-content: start;
overflow: hidden;
}
.grid > .drink { aspect-ratio: 1 / 1; }
@media (max-width: 480px) {
.grid { grid-template-columns: repeat(2, 1fr); }
@ -96,19 +97,22 @@ button:disabled { opacity: 0.4; }
}
.cart {
flex: 0 0 auto;
flex: 0 0 38vh;
background: #1a1a1a;
border-top: 1px solid #333;
padding: 8px 16px;
display: flex;
flex-direction: column;
max-height: 38vh;
min-height: 0;
}
.cart-items {
flex: 1 1 auto;
overflow-y: auto;
flex: 1 1 0;
min-height: 0;
overflow: hidden;
margin-bottom: 6px;
min-height: 60px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.cart-line {
display: flex;