From d44601fee1bc5a1c75ee8f73739b444c179c67ab Mon Sep 17 00:00:00 2001 From: Jens Ahrensfeld Date: Sun, 28 Jun 2026 15:18:54 +0200 Subject: [PATCH] Optimize browser GUI layout for iPad Air 4 / Safari - Add viewport meta tag so Safari uses device CSS pixels - Move LCD units to a dedicated right-hand column; strip them from labels - Tighten LCD grid: 4-column layout, narrower gap, font-size 1.9em Co-Authored-By: Claude Sonnet 4.6 Claude-Session: https://claude.ai/code/session_01SH2D4LRuCnhLSzoYerAfJX --- web/index.html | 11 ++++++++--- web/style.css | 7 ++++--- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/web/index.html b/web/index.html index 1c6447d..ba7f91a 100644 --- a/web/index.html +++ b/web/index.html @@ -2,6 +2,7 @@ + BrewPi @@ -88,21 +89,25 @@
Ist
Soll
+
-
Temperature [°C]
+
Temperature
--
--
+
°C
-
Heat rate [°C/min]
+
Heat rate
--
--
+
°C/min
-
Power [W]
+
Power
--
--
+
W
diff --git a/web/style.css b/web/style.css index 9e31a51..a04369a 100644 --- a/web/style.css +++ b/web/style.css @@ -154,13 +154,14 @@ header#connection-bar { #lcd-panel { display: grid; - grid-template-columns: 9em 4em 4em; - gap: 0.25em 0.5em; - font-size: 2.2em; + grid-template-columns: 7em 4em 4em auto; + gap: 0.2em 0.3em; + font-size: 1.9em; } .lcd-row { display: contents; } .lcd-header { font-weight: bold; color: var(--text-muted); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; } .lcd-label { color: var(--text-muted); font-size: 0.9em; align-self: center; } +.lcd-unit { color: var(--text-muted); font-size: 0.7em; align-self: center; white-space: nowrap; } .lcd { font-family: 'Courier New', 'Lucida Console', monospace; font-size: 1.1em;