Dashboard wirklich responsive: Hauptgitter selbstregelnd, Abstaende in rem (v=170)

User: am Handy passen sich die Groessen nicht an.

HAUPTBEFUND: main hatte FESTE 2 Spalten und brach erst bei <=360px um --
moderne Handys haben 390-430 CSS-Pixel. Auf dem Geraet standen also zwei
Spalten a ~190px nebeneinander. Der Breakpoint war schlicht zu schmal geraten.

Jetzt selbstregelnd, ohne geratenen Breakpoint:
  main{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
  360/390/430px -> 1 Spalte · 768 -> 2 · 1024 -> 3 · 1440 -> 4

ZWEITER BEFUND: 138 Abstaende in px, 0 in rem -- die Schrift skalierte seit dem
13.08., die Polster nicht. Damit sass der Text am Handy eng und auf dem Desktop
verloren. Jetzt 122 von 138 auf rem umgestellt (Basis 18px, passend zur fluiden
Wurzel); die verbleibenden 29 sind Werte < 4px, wo Rundung mehr schadet als
nuetzt. Rahmen, Radien und Punktgroessen bleiben BEWUSST px -- die sollen nicht
mitwachsen.

Auch .trades (5 feste Spalten, sprengte 390px) auf auto-fit umgestellt.

Ausgeliefert verifiziert: auto-fit im CSS, 122 rem-Abstaende, HTML zieht v=170.
Backup web/style.css.bak-2026-08-19.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Axel Hocks
2026-08-19 00:32:07 +02:00
co-authored by Claude Opus 5
parent 3a1d8f7687
commit d03d6a1a50
3 changed files with 649 additions and 105 deletions
+2 -2
View File
@@ -6,7 +6,7 @@
<meta name="theme-color" content="#0d1117">
<title>Oil · MT5</title>
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="style.css?v=169">
<link rel="stylesheet" href="style.css?v=170">
</head>
<body>
<!-- Modul-Menü (ganz oben) -->
@@ -356,6 +356,6 @@
</div>
<div id="toast" class="toast hidden"></div>
<script src="app.js?v=169"></script>
<script src="app.js?v=170"></script>
</body>
</html>