From cb96343d8ceb406a7d3c5bd72959195317f51f91 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Fri, 29 May 2026 16:05:53 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20Tankst=C3=A4nde=20im=20Logbuch=20einheit?=
 =?UTF-8?q?lich=20ausrichten=20und=20formatieren.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Kürzere Labels, gemeinsames Input-Styling ohne cell-input und CSS-Grid-Fix für Frischwasser- und Kraftstoff-Felder.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 client/src/App.css                       | 35 ++++++++++++++++++++++++
 client/src/components/LogEntryEditor.tsx | 30 ++++++++++----------
 2 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index 316ce1f..d24d756 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -1891,6 +1891,41 @@ body:has(.theme-cupertino) {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
+  align-items: end;
+}
+
+.consumption-grid .input-group {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.consumption-grid .input-group label {
+  flex: 1 1 auto;
+  min-height: 2.75em;
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: 8px;
+  line-height: 1.35;
+}
+
+.consumption-grid .input-group .input-text {
+  flex-shrink: 0;
+  -moz-appearance: textfield;
+}
+
+.consumption-grid .input-text::-webkit-outer-spin-button,
+.consumption-grid .input-text::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.consumption-grid .consumption-value {
+  color: #4ade80;
+  font-weight: 700;
+  text-align: center;
+  pointer-events: none;
+  cursor: default;
 }
 
 @media (max-width: 480px) {
diff --git a/client/src/components/LogEntryEditor.tsx b/client/src/components/LogEntryEditor.tsx
index 915eae9..267c4fa 100644
--- a/client/src/components/LogEntryEditor.tsx
+++ b/client/src/components/LogEntryEditor.tsx
@@ -764,7 +764,7 @@ export default function LogEntryEditor({
             </div>
             <div className="consumption-grid">
               <div className="input-group">
-                <label>{t('logs.freshwater')} ({t('logs.morning')})</label>
+                <label>{t('logs.morning')}</label>
                 <input
                   type="number"
                   className="input-text"
@@ -775,7 +775,7 @@ export default function LogEntryEditor({
               </div>
 
               <div className="input-group">
-                <label>{t('logs.freshwater')} ({t('logs.refilled')})</label>
+                <label>{t('logs.refilled')}</label>
                 <input
                   type="number"
                   className="input-text"
@@ -786,7 +786,7 @@ export default function LogEntryEditor({
               </div>
 
               <div className="input-group">
-                <label>{t('logs.freshwater')} ({t('logs.evening')})</label>
+                <label>{t('logs.evening')}</label>
                 <input
                   type="number"
                   className="input-text"
@@ -799,11 +799,12 @@ export default function LogEntryEditor({
               <div className="input-group">
                 <label>{t('logs.consumption')} (L)</label>
                 <input
-                  type="text"
-                  className="input-text cell-input text-green"
-                  style={{ color: '#4ade80', fontWeight: 'bold' }}
+                  type="number"
+                  className="input-text consumption-value"
                   value={fwConsumption}
-                  disabled
+                  readOnly
+                  tabIndex={-1}
+                  aria-readonly="true"
                 />
               </div>
             </div>
@@ -817,7 +818,7 @@ export default function LogEntryEditor({
             </div>
             <div className="consumption-grid">
               <div className="input-group">
-                <label>{t('logs.fuel')} ({t('logs.morning')})</label>
+                <label>{t('logs.morning')}</label>
                 <input
                   type="number"
                   className="input-text"
@@ -828,7 +829,7 @@ export default function LogEntryEditor({
               </div>
 
               <div className="input-group">
-                <label>{t('logs.fuel')} ({t('logs.refilled')})</label>
+                <label>{t('logs.refilled')}</label>
                 <input
                   type="number"
                   className="input-text"
@@ -839,7 +840,7 @@ export default function LogEntryEditor({
               </div>
 
               <div className="input-group">
-                <label>{t('logs.fuel')} ({t('logs.evening')})</label>
+                <label>{t('logs.evening')}</label>
                 <input
                   type="number"
                   className="input-text"
@@ -852,11 +853,12 @@ export default function LogEntryEditor({
               <div className="input-group">
                 <label>{t('logs.consumption')} (L)</label>
                 <input
-                  type="text"
-                  className="input-text cell-input text-green"
-                  style={{ color: '#4ade80', fontWeight: 'bold' }}
+                  type="number"
+                  className="input-text consumption-value"
                   value={fuelConsumption}
-                  disabled
+                  readOnly
+                  tabIndex={-1}
+                  aria-readonly="true"
                 />
               </div>
             </div>