fix(ui): stabilize sidebar layout

src/server/request-handler.ts

@@ -156,12 +156,14 @@ function htmlPage(): string {
       html,
       body {
         margin: 0;
-        height: 100%;
+        min-height: 100%;
       }
 
       body {
         display: grid;
-        grid-template-rows: auto 1fr;
+        grid-template-rows: auto minmax(0, 1fr);
+        height: 100dvh;
+        overflow: hidden;
         font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
         color: var(--text);
         background:
@@ -208,7 +210,7 @@ function htmlPage(): string {
       .layout {
         min-height: 0;
         display: grid;
-        grid-template-columns: 360px 1fr;
+        grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
         gap: 14px;
         padding: 0 14px 14px;
       }
@@ -225,18 +227,28 @@ function htmlPage(): string {
 
       aside {
         min-height: 0;
+        min-width: 0;
         padding: 16px;
         display: grid;
+        grid-template-rows: auto minmax(0, 1fr);
         gap: 14px;
+        overflow: auto;
       }
 
       .card {
+        min-width: 0;
         padding: 15px;
         border-radius: var(--radius-lg);
         border: 1px solid var(--card-border);
         background: var(--surface);
       }
 
+      .photo-card {
+        min-height: 0;
+        display: grid;
+        grid-template-rows: auto auto minmax(0, 1fr);
+      }
+
       .card h2 {
         font-size: 1rem;
         margin-bottom: 8px;
@@ -329,6 +341,7 @@ function htmlPage(): string {
         margin-top: 10px;
         font-size: 0.9rem;
         color: var(--muted);
+        overflow-wrap: anywhere;
       }
 
       .status-row {
@@ -336,6 +349,11 @@ function htmlPage(): string {
         align-items: center;
         gap: 10px;
         margin-top: 10px;
+        min-width: 0;
+      }
+
+      .status-row .status {
+        margin-top: 0;
       }
 
       .spinner {
@@ -388,12 +406,18 @@ function htmlPage(): string {
         gap: 12px;
         font-size: 0.82rem;
         color: var(--muted);
+        min-width: 0;
+      }
+
+      .progress-meta span {
+        min-width: 0;
+        overflow-wrap: anywhere;
       }
 
       .list {
         display: grid;
         gap: 10px;
-        max-height: min(44vh, 380px);
+        min-height: 0;
         overflow: auto;
         padding-right: 2px;
       }
@@ -407,6 +431,7 @@ function htmlPage(): string {
         border-radius: var(--radius-md);
         background: var(--photo-bg);
         border: 1px solid var(--card-border);
+        min-width: 0;
       }
 
       .photo img {
@@ -419,11 +444,18 @@ function htmlPage(): string {
       .photo strong {
         display: block;
         font-size: 0.95rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       .photo span {
         color: var(--muted);
         font-size: 0.82rem;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       .photo.active {
@@ -443,6 +475,7 @@ function htmlPage(): string {
       main {
         position: relative;
         min-height: 0;
+        min-width: 0;
         overflow: hidden;
         display: grid;
         grid-template-rows: minmax(460px, 1fr) auto;
@@ -757,8 +790,23 @@ function htmlPage(): string {
       }
 
       @media (max-width: 920px) {
+        body {
+          height: auto;
+          min-height: 100dvh;
+          overflow: auto;
+        }
+
         .layout {
           grid-template-columns: 1fr;
+          min-height: 0;
+        }
+
+        aside {
+          overflow: visible;
+        }
+
+        .list {
+          max-height: min(52vh, 420px);
         }
 
         main {
@@ -846,7 +894,7 @@ function htmlPage(): string {
           <small>Public Nextcloud shares are read via WebDAV.</small>
         </section>
 
-        <section class="card">
+        <section class="card photo-card">
           <h2>Photos</h2>
           <small id="photo-count" class="muted">0 photos</small>
           <div id="photo-list" class="list">