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;