ah-admin/AH-Oil-Trader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Picos Formular-Hoehe zurueckgenommen (v=172)

Browse Source 
User: die Textfelder des laufenden Trades sind viel zu hoch.

ZWEI Pico-Regeln waren schuld:
 (1) input{height:calc(1rem*line-height + spacing-vertical*2 + border*2)} --
     mit --pico-form-element-spacing-vertical:0.75rem sind das ~3rem = 48px.
     Unsere .tb-field-Regel setzt nur padding, KEINE Hoehe -- also gewann Pico.
 (2) input{margin-bottom:var(--pico-spacing)} -- nochmal 0,7rem darunter.

height:auto laesst wieder das eigene Padding die Hoehe bestimmen; margin-bottom:0
entfernt den Formular-Abstand. Checkbox/Radio/Range ausgenommen (eigene
Groessenlogik).

Rechnerisch am Handy (Wurzel 16px): vorher ~50px, jetzt ~30px.

Das ist die erste Stelle, an der Pico sichtbar durchgeschlagen hat -- genau der
Fall, den ich beim Einbau angekuendigt habe. Die Bruecke im Kopf von style.css
ist der Ort fuer weitere solche Ruecknahmen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Axel Hocks
2026-08-19 00:41:48 +02:00
co-authored by Claude Opus 5
parent 572c6c0253
commit 3b5706c6bb
2 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+2 -2
View File
@@ -12,7 +12,7 @@
⚠ LOKAL eingebunden, kein CDN: die PWA laeuft ueber WireGuard ⚠ LOKAL eingebunden, kein CDN: die PWA laeuft ueber WireGuard
und muss offline funktionieren. --> und muss offline funktionieren. -->
<link rel="stylesheet" href="pico.min.css?v=1"> <link rel="stylesheet" href="pico.min.css?v=1">
<link rel="stylesheet" href="style.css?v=171"> <link rel="stylesheet" href="style.css?v=172">
</head> </head>
<body> <body>
<!-- Modul-Menü (ganz oben) --> <!-- Modul-Menü (ganz oben) -->
@@ -362,6 +362,6 @@
</div> </div>
<div id="toast" class="toast hidden"></div> <div id="toast" class="toast hidden"></div>
<script src="app.js?v=171"></script> <script src="app.js?v=172"></script>
</body> </body>
</html> </html>
web/style.css
+12
View File
@@ -42,6 +42,18 @@
} }
/* Pico gibt <nav>/<section>/<main> eigene Container-Regeln; unser Layout /* Pico gibt <nav>/<section>/<main> eigene Container-Regeln; unser Layout
bringt sie selbst mit. Nur das zuruecknehmen, was kollidiert. */ bringt sie selbst mit. Nur das zuruecknehmen, was kollidiert. */
/* ⚠⚠ PICOS FORMULAR-HOEHE ZURUECKNEHMEN (User 2026-08-19: „die Textfelder des
laufenden Trades sind viel zu hoch"). ZWEI Regeln waren schuld:
input{height:calc(1rem*line-height + spacing-vertical*2 + border*2)}
-> mit --pico-form-element-spacing-vertical:0.75rem sind das ~3rem ≈ 48px.
Unsere .tb-field-Regel setzt nur `padding`, KEINE Hoehe — also gewann
Pico. Ein Trading-Dashboard braucht kompakte Felder, kein Formular.
input{margin-bottom:var(--pico-spacing)} -> nochmal 0,7rem darunter.
`height:auto` laesst wieder das eigene Padding die Hoehe bestimmen.
⚠ Checkbox/Radio/Range ausgenommen — die haben ihre eigene Groessenlogik. */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select, textarea{ height:auto; margin-bottom:0; }
main, section, nav{ padding-inline: unset; } main, section, nav{ padding-inline: unset; }
main > *, section > *{ margin-bottom: unset; } main > *, section > *{ margin-bottom: unset; }
h2{ margin-block: 0; } h2{ margin-block: 0; }