From e9e07f9bedf6ce04276fb3339a76beaa30651cdb Mon Sep 17 00:00:00 2001
From: marc <marc@shortcake.local>
Date: Mon, 24 Aug 2026 16:11:27 +0200
Subject: [PATCH] fix(ui): schmale Geraete zeigten nur eine Kachelspalte

Auf 360px (Galaxy Z Flip 7 aufgeklappt) brauchten zwei Spalten
2x160 + 12 = 332px, verfuegbar waren nach 20px Innenrand aber nur
320px - also fiel das Raster auf eine Spalte zurueck.

Schmal jetzt 132px Mindestbreite, 10px Abstand, 12px Innenrand. Damit
stehen zwei Spalten ab 300px Fensterbreite, ohne dass breite Schirme
sich aendern (dort weiter 160px und 20px).

Raster und Innenrand stehen als Klassen in index.css: inline gesetzt
haette die Media-Query sie nicht erreicht - derselbe Fehler wie zuletzt
in der Kopfleiste.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 TESTING.md                              | 20 +++++++++++++++
 frontend/src/components/FileViews.tsx   |  9 +++----
 frontend/src/index.css                  | 34 +++++++++++++++++++++++++
 frontend/src/pages/AdminPage.tsx        |  2 +-
 frontend/src/pages/FileBrowser.tsx      |  2 +-
 frontend/src/pages/ProfilePage.tsx      |  2 +-
 frontend/src/pages/SharedPage.tsx       |  2 +-
 frontend/src/pages/SharedWithMePage.tsx |  2 +-
 frontend/src/pages/TagsPage.tsx         |  2 +-
 frontend/src/pages/TrashPage.tsx        |  2 +-
 10 files changed, 65 insertions(+), 12 deletions(-)

diff --git a/TESTING.md b/TESTING.md
index 6433512..1b1d8f8 100644
--- a/TESTING.md
+++ b/TESTING.md
@@ -1356,6 +1356,26 @@ Geprüft auf 1280×900 und 412×915:
 - [ ] Windows-Weg auf einem echten Windows durchspielen – die 50-MB-Grenze und
       der Registry-Pfad stammen aus der Dokumentation, nicht aus einem Versuch
 
+## Kachelraster auf schmalen Geräten (24.08.2026)
+
+Ein Galaxy Z Flip 7 (360px aufgeklappt) zeigte **eine** Spalte statt zwei:
+Bei 160px Mindestbreite und 20px Innenrand brauchen zwei Spalten 332px, da
+waren aber nur 320px. Schmal jetzt 132px Mindestbreite, 10px Abstand und
+12px Innenrand.
+
+| Breite | Spalten | Kachel | Innenrand | Querlauf |
+|---|---|---|---|---|
+| 316 (Deckelschirm) | 2 | 141px | 12px | nein |
+| 360 (Flip 7) | 2 | 163px | 12px | nein |
+| 412 (übliches Handy) | 2 | 189px | 12px | nein |
+| 768 | 3 | 161px | 20px | nein |
+| 1280 | 6 | 160px | 20px | nein |
+
+Raster und Innenrand stehen jetzt als Klassen in `index.css`; inline gesetzt
+hätte keine Media-Query sie erreicht.
+
+- [ ] Auf dem Flip 7 selbst gegenprüfen, auf beiden Schirmen
+
 ## Automatisiert geprüft (22.08.2026)
 
 Diese Punkte hat Claude per API/`curl` gegen Wegwerf-Konten durchgespielt; sie
diff --git a/frontend/src/components/FileViews.tsx b/frontend/src/components/FileViews.tsx
index aa73765..312ddd8 100644
--- a/frontend/src/components/FileViews.tsx
+++ b/frontend/src/components/FileViews.tsx
@@ -115,11 +115,10 @@ export default function GridView({ folders, files, onFolderOpen, onFolderMenu, o
   const highlightRef = useScrollToHighlight(highlightId)
   const coarse = useCoarsePointer()
   return (
-    <div style={{
-      display: 'grid',
-      gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))',
-      gap: 12,
-    }}>
+    // Raster und Abstände stehen in index.css (.aether-grid). Hier inline
+    // gesetzt wären sie auf dem Handy nicht zu ändern: Ein Inline-Stil schlägt
+    // jede Media-Query – daran ist die Kopfleiste schon zweimal gescheitert.
+    <div className="aether-grid">
       {folders.map(folder => {
         const isOver = dragOverFolder === folder.id
         // Ein Gruppenordner lässt sich nicht verschieben – ihn ziehbar zu
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 134d636..3dd449b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -80,3 +80,37 @@ body {
 ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
 
 ::selection { background: var(--color-primary); color: #fff; }
+
+/* ── Kachelansicht ────────────────────────────────────────────────────────────
+   Als Klasse und nicht als Inline-Stil, damit die Media-Query überhaupt greift:
+   Ein Inline-Stil schlägt jede Klassenregel, und genau daran ist die
+   Kopfleiste schon zweimal gescheitert.
+
+   Die Zahlen sind gerechnet, nicht geschätzt. Zwei Spalten brauchen
+   2 × Mindestbreite + Abstand, und der Platz ist die Fensterbreite minus dem
+   Innenrand des Inhaltsbereichs:
+
+     Gerät                   Breite   nutzbar   2 Spalten brauchen
+     Flip 7 aufgeklappt      360px    336px     274px  ✔ (vorher 332 > 320 ✘)
+     Flip 7 Deckelschirm     316px    292px     274px  ✔
+     übliches Handy          412px    388px     274px  ✔ (drei bräuchten 416)
+
+   Bei 160px Mindestbreite und 20px Innenrand fielen 360px-Geräte auf **eine**
+   Spalte zurück – zwei hätten 332px gebraucht, da waren nur 320px. */
+.aether-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+}
+
+.aether-content { padding: 20px; }
+
+@media not all and (min-width: 720px) {
+  .aether-grid {
+    gap: 10px;
+    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
+  }
+  /* Schmal ist Rand verschenkte Fläche – 12px genügen, um die Kacheln nicht
+     an der Kante kleben zu lassen. */
+  .aether-content { padding: 12px; }
+}
diff --git a/frontend/src/pages/AdminPage.tsx b/frontend/src/pages/AdminPage.tsx
index f5017d9..d8d49fe 100644
--- a/frontend/src/pages/AdminPage.tsx
+++ b/frontend/src/pages/AdminPage.tsx
@@ -41,7 +41,7 @@ export default function AdminPage() {
         meta="Users, groups, appearance and activity"
       />
 
-      <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>
+      <div className="aether-content" style={{ flex: 1, overflowY: 'auto' }}>
       <Tabs tabs={tabs} active={tab} onChange={setTab} />
 
       {tab === 'users' && <UsersTab />}
diff --git a/frontend/src/pages/FileBrowser.tsx b/frontend/src/pages/FileBrowser.tsx
index e5add0c..6a0138c 100644
--- a/frontend/src/pages/FileBrowser.tsx
+++ b/frontend/src/pages/FileBrowser.tsx
@@ -850,7 +850,7 @@ export default function FileBrowser({
       </PageHeader>
 
       {/* Content */}
-      <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>
+      <div className="aether-content" style={{ flex: 1, overflowY: 'auto' }}>
         {loading && (
           <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 80 }}>
             <div style={{
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 2edbfed..da924e2 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -274,7 +274,7 @@ export default function ProfilePage({ user, onUserChanged }: Props) {
         meta="Your account, devices and appearance"
       />
 
-      <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>
+      <div className="aether-content" style={{ flex: 1, overflowY: 'auto' }}>
       <div style={{ maxWidth: 560 }}>
 
         <Tabs tabs={tabs} active={tab} onChange={setTab} />
diff --git a/frontend/src/pages/SharedPage.tsx b/frontend/src/pages/SharedPage.tsx
index e5a7c52..6c614a6 100644
--- a/frontend/src/pages/SharedPage.tsx
+++ b/frontend/src/pages/SharedPage.tsx
@@ -56,7 +56,7 @@ export default function SharedPage() {
         meta={links.length > 0 ? `${links.length} link${links.length !== 1 ? 's' : ''}` : undefined}
       />
 
-      <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>
+      <div className="aether-content" style={{ flex: 1, overflowY: 'auto' }}>
         {loading && (
           <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 80 }}>
             <div style={{ width: 24, height: 24, border: '2px solid var(--color-primary)', borderTopColor: 'transparent', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} />
diff --git a/frontend/src/pages/SharedWithMePage.tsx b/frontend/src/pages/SharedWithMePage.tsx
index 1b9f89b..7fd8199 100644
--- a/frontend/src/pages/SharedWithMePage.tsx
+++ b/frontend/src/pages/SharedWithMePage.tsx
@@ -37,7 +37,7 @@ export default function SharedWithMePage({ onOpenFolder }: Props) {
         meta="Files and folders other people gave you access to"
       />
 
-      <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>
+      <div className="aether-content" style={{ flex: 1, overflowY: 'auto' }}>
 
       {loading ? (
         <p style={{ fontSize: 13, color: 'var(--color-text-muted)' }}>Loading…</p>
diff --git a/frontend/src/pages/TagsPage.tsx b/frontend/src/pages/TagsPage.tsx
index 44b1a75..a4ebb25 100644
--- a/frontend/src/pages/TagsPage.tsx
+++ b/frontend/src/pages/TagsPage.tsx
@@ -109,7 +109,7 @@ export default function TagsPage({ tagId, correspondentId, onOpenFolder }: Props
         )}
       </PageHeader>
 
-      <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>
+      <div className="aether-content" style={{ flex: 1, overflowY: 'auto' }}>
         {loading && (
           <p style={{ color: 'var(--color-text-muted)', fontSize: 13 }}>Loading…</p>
         )}
diff --git a/frontend/src/pages/TrashPage.tsx b/frontend/src/pages/TrashPage.tsx
index 62cd98f..a7661e9 100644
--- a/frontend/src/pages/TrashPage.tsx
+++ b/frontend/src/pages/TrashPage.tsx
@@ -73,7 +73,7 @@ export default function TrashPage({ onUserChanged }: Props) {
         )}
       </PageHeader>
 
-      <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>
+      <div className="aether-content" style={{ flex: 1, overflowY: 'auto' }}>
         {loading && (
           <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 80 }}>
             <div style={{ width: 24, height: 24, border: '2px solid var(--color-primary)', borderTopColor: 'transparent', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} />