From 927d13191dfcd5d7f3d8a9489825666e95034b93 Mon Sep 17 00:00:00 2001
From: Wolfgang Hottgenroth <wolfgang.hottgenroth@icloud.com>
Date: Fri, 28 Nov 2025 08:53:00 +0100
Subject: [PATCH] garaga page 19

---
 apps/ui/templates/garage.html | 67 ++++++++++++++++++++++-------------
 1 file changed, 43 insertions(+), 24 deletions(-)

diff --git a/apps/ui/templates/garage.html b/apps/ui/templates/garage.html
index 3eac5b4..b2009e7 100644
--- a/apps/ui/templates/garage.html
+++ b/apps/ui/templates/garage.html
@@ -195,6 +195,19 @@
             gap: 8px;
         }
 
+        .phase-row {
+            display: flex;
+            gap: 8px;
+        }
+
+        .phase-value.full-width {
+            flex: 1;
+        }
+
+        .phase-value.half-width {
+            flex: 1;
+        }
+
         .phase-value {
             display: flex;
             justify-content: space-between;
@@ -448,51 +461,57 @@
                 <div class="phase-section">
                     <h4>Phase 1</h4>
                     <div class="phase-values">
-                        <div class="phase-value">
+                        <div class="phase-value full-width">
                             <span class="value" id="phase1-power-${device.device_id}">${state.phase1_power?.toFixed(0) || '--'}</span>
                             <span class="unit">W</span>
                         </div>
-                        <div class="phase-value">
-                            <span class="value" id="phase1-voltage-${device.device_id}">${state.phase1_voltage?.toFixed(1) || '--'}</span>
-                            <span class="unit">V</span>
-                        </div>
-                        <div class="phase-value">
-                            <span class="value" id="phase1-current-${device.device_id}">${state.phase1_current?.toFixed(2) || '--'}</span>
-                            <span class="unit">A</span>
+                        <div class="phase-row">
+                            <div class="phase-value half-width">
+                                <span class="value" id="phase1-voltage-${device.device_id}">${state.phase1_voltage?.toFixed(1) || '--'}</span>
+                                <span class="unit">V</span>
+                            </div>
+                            <div class="phase-value half-width">
+                                <span class="value" id="phase1-current-${device.device_id}">${state.phase1_current?.toFixed(2) || '--'}</span>
+                                <span class="unit">A</span>
+                            </div>
                         </div>
                     </div>
                 </div>
                 <div class="phase-section">
                     <h4>Phase 2</h4>
                     <div class="phase-values">
-                        <div class="phase-value">
+                        <div class="phase-value full-width">
                             <span class="value" id="phase2-power-${device.device_id}">${state.phase2_power?.toFixed(0) || '--'}</span>
                             <span class="unit">W</span>
                         </div>
-                        <div class="phase-value">
-                            <span class="value" id="phase2-voltage-${device.device_id}">${state.phase2_voltage?.toFixed(1) || '--'}</span>
-                            <span class="unit">V</span>
-                        </div>
-                        <div class="phase-value">
-                            <span class="value" id="phase2-current-${device.device_id}">${state.phase2_current?.toFixed(2) || '--'}</span>
-                            <span class="unit">A</span>
+                        <div class="phase-row">
+                            <div class="phase-value half-width">
+                                <span class="value" id="phase2-voltage-${device.device_id}">${state.phase2_voltage?.toFixed(1) || '--'}</span>
+                                <span class="unit">V</span>
+                            </div>
+                            <div class="phase-value half-width">
+                                <span class="value" id="phase2-current-${device.device_id}">${state.phase2_current?.toFixed(2) || '--'}</span>
+                                <span class="unit">A</span>
+                            </div>
                         </div>
                     </div>
                 </div>
                 <div class="phase-section">
                     <h4>Phase 3</h4>
                     <div class="phase-values">
-                        <div class="phase-value">
+                        <div class="phase-value full-width">
                             <span class="value" id="phase3-power-${device.device_id}">${state.phase3_power?.toFixed(0) || '--'}</span>
                             <span class="unit">W</span>
                         </div>
-                        <div class="phase-value">
-                            <span class="value" id="phase3-voltage-${device.device_id}">${state.phase3_voltage?.toFixed(1) || '--'}</span>
-                            <span class="unit">V</span>
-                        </div>
-                        <div class="phase-value">
-                            <span class="value" id="phase3-current-${device.device_id}">${state.phase3_current?.toFixed(2) || '--'}</span>
-                            <span class="unit">A</span>
+                        <div class="phase-row">
+                            <div class="phase-value half-width">
+                                <span class="value" id="phase3-voltage-${device.device_id}">${state.phase3_voltage?.toFixed(1) || '--'}</span>
+                                <span class="unit">V</span>
+                            </div>
+                            <div class="phase-value half-width">
+                                <span class="value" id="phase3-current-${device.device_id}">${state.phase3_current?.toFixed(2) || '--'}</span>
+                                <span class="unit">A</span>
+                            </div>
                         </div>
                     </div>
                 </div>