From 5b01610634b8227da606e4ce4d7c10ebc5ad84d8 Mon Sep 17 00:00:00 2001 From: Axel Hocks Date: Wed, 19 Aug 2026 00:44:44 +0200 Subject: [PATCH] Einsatz-Feld: feste Breiten durch mitwachsende ersetzt (v=174) User: das Einsatz-Feld ist nicht breit genug. Die Trade-Leiste hatte width:88px fest, die Order-Leiste 74px. Der Einsatz zeigt Betraege wie '712.84 EUR' -- bei fett und 0,94rem passt das in 88px nicht (das sind ~9,7 Zeichen Platz bei 10 benoetigten). Jetzt in ch statt px: 1ch ist die Breite einer Ziffer und haengt damit an der Schriftgroesse -- skaliert also mit der fluiden Wurzel mit, was ein px-Wert nicht tut. Anzeige-Werte bekommen width:auto + min-width:7.5ch und duerfen bei laengeren Betraegen darueber hinaus wachsen statt abzuschneiden; Eingabefelder bleiben bei 8ch als feste, aber mitskalierende Basis. Order-Leiste 74px -> 7ch. Das war dieselbe Klasse wie die px-Abstaende von heute frueh: eine feste Pixelzahl in einem Layout, dessen Schrift skaliert. Verifiziert: min-width:7.5ch im ausgelieferten CSS, HTML zieht v=174. Co-Authored-By: Claude Opus 5 --- web/index.html | 4 ++-- web/style.css | 12 +++++++++--- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/web/index.html b/web/index.html index 15168ef..17e4374 100644 --- a/web/index.html +++ b/web/index.html @@ -12,7 +12,7 @@ ⚠ LOKAL eingebunden, kein CDN: die PWA laeuft ueber WireGuard und muss offline funktionieren. --> - + @@ -362,6 +362,6 @@ - + diff --git a/web/style.css b/web/style.css index 2f49ca6..bd82764 100644 --- a/web/style.css +++ b/web/style.css @@ -226,11 +226,17 @@ main{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); Felder (SL/TP/Gewinn-Close/Notfall-Close) sehen identisch aus (Label über Box). */ .tb-field{display:flex;flex-direction:column;gap:2px} .tb-field label{font-size:0.7222rem;color:var(--dim);letter-spacing:.5px} -.tb-field input, .tb-field .tb-val{width:88px;background:var(--surface-2); +/* ⚠ Feste 88px waren zu schmal (User 2026-08-19: „das Einsatz-Feld ist nicht + breit genug"). Der Einsatz zeigt Betraege wie „712.84 €" — bei fett und + 0,94rem passt das nicht in 88px. `ch` = Breite einer Ziffer, haengt also + an der Schriftgroesse und waechst mit der fluiden Wurzel mit; `width:auto` + laesst laengere Werte darueber hinaus wachsen, statt sie abzuschneiden. */ +.tb-field input, .tb-field .tb-val{width:auto;min-width:7.5ch;background:var(--surface-2); border:1px solid var(--border);border-radius:var(--r-sm);color:var(--bright); font-size:0.9444rem;font-weight:700;padding:0.3333rem 0.3889rem;text-align:center; transition:border-color .15s, box-shadow .15s} -.tb-field .tb-val{display:block} /* nur Anzeige, kein Input */ +.tb-field .tb-val{display:block;white-space:nowrap} +.tb-field input{width:8ch} /* Eingaben: feste, aber mitskalierende Basis */ /* nur Anzeige, kein Input */ .tb-field input:focus{outline:none;border-color:var(--blue); box-shadow:0 0 0 2px #58a6ff33} .tb-field.stop input{border-color:#5c1a1a;color:#f85149} /* SL/Notfall rötlich */ @@ -566,7 +572,7 @@ main{padding-bottom:4.1111rem} /* Platz für die fixe Leiste */ .mg-field { display: inline-flex; flex-direction: column; gap:2px; margin-right:0.4444rem; } .mg-field label { font-size:0.6111rem; color: var(--dim); line-height: 1; } .mg-field input { - width: 74px; padding:0.2778rem 0.3889rem; + width: 7ch; min-width: 7ch; padding:0.2778rem 0.3889rem; background: var(--surface-2); color: var(--bright); border: 1px solid var(--border); border-radius: var(--r-sm); font-family: var(--mono); font-size:0.7778rem; text-align: right;