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

@@ -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

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

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; }
+}

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 />}

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={{

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} />

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' }} />

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>

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>
         )}

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' }} />