feat(ui): redesign upload page into a two-column layout

Redesigns the upload interface to use a two-column grid layout on larger screens, separating the file drop-zone (left) from the upload options (right). This improves usability and visual hierarchy.

Changes include:
- Increasing the upload view max-width to 64rem.
- Creating a responsive `.upload-grid` that collapses to a single column on narrow viewports.
- Stacking option fields vertically in the narrower options panel.
- Adding retro theme support for the new options title.

backend/static/css/16-retro.css

@@ -257,7 +257,8 @@
   margin-bottom: 0;
 }
 
-:root[data-theme="retro"] .docs-card h2 {
+:root[data-theme="retro"] .docs-card h2,
+:root[data-theme="retro"] .upload-options .options-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -279,7 +280,8 @@
   margin: -1.5rem -1.5rem 1rem;
 }
 
-:root[data-theme="retro"] .docs-card h2::after {
+:root[data-theme="retro"] .docs-card h2::after,
+:root[data-theme="retro"] .upload-options .options-title::after {
   content: "✕";
   display: grid;
   place-items: center;

backend/static/css/20-upload.css

@@ -1,5 +1,5 @@
 .upload-view {
-  width: min(48rem, calc(100% - 2rem));
+  width: min(64rem, calc(100% - 2rem));
   min-height: calc(100vh - 7.25rem);
   margin: 0 auto;
   padding: 2.5rem 0;
@@ -9,6 +9,45 @@
   gap: 1.5rem;
 }
 
+/* Two-column upload layout: drop-zone window on the left, options on the
+   right. Collapses to a single column on narrow screens (see 90-responsive). */
+.upload-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  gap: 1.25rem;
+  align-items: start;
+}
+
+.upload-main,
+.upload-options {
+  margin: 0;
+}
+
+.options-title {
+  margin: 0 0 1.1rem;
+  font-size: 1.05rem;
+  font-weight: 650;
+  line-height: 1.2;
+}
+
+/* Stack the option fields vertically in the narrower right-hand window. */
+.upload-options .option-grid {
+  grid-template-columns: 1fr;
+  margin-top: 0;
+}
+
+/* Summary + upload button sit at the bottom of the options window. */
+.upload-options .form-footer {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.75rem;
+  margin-top: 1.25rem;
+}
+
+.upload-options .form-footer .button {
+  width: 100%;
+}
+
 .hero-copy {
   text-align: center;
 }

backend/static/css/90-responsive.css

@@ -11,6 +11,10 @@
     padding: 2rem 0;
   }
 
+  .upload-grid {
+    grid-template-columns: 1fr;
+  }
+
   .option-grid,
   .form-footer,
   .result-header,

backend/templates/pages/home.html

@@ -10,33 +10,44 @@
     {{end}}
   </div>
 
-  <form class="upload-panel card" id="upload-form" action="/api/v1/upload" method="post" enctype="multipart/form-data">
+  <form class="upload-grid" id="upload-form" action="/api/v1/upload" method="post" enctype="multipart/form-data">
-    <div class="card-content">
+    <div class="card upload-main">
-      {{if .CurrentUser}}
+      <div class="card-content">
-      <h1 id="upload-title">Drop it. Share it.</h1>
+        {{if .CurrentUser}}
-      <p class="upload-subtitle">{{.Data.LimitSummary}}</p>
+        <h1 id="upload-title">Drop it. Share it.</h1>
-      {{else}}
+        <p class="upload-subtitle">{{.Data.LimitSummary}}</p>
-      <h1 id="upload-title">Send a file. Get a link.</h1>
+        {{else}}
-      <p class="upload-subtitle">Fast, private transfers that expire on your terms.</p>
+        <h1 id="upload-title">Send a file. Get a link.</h1>
-      {{end}}
+        <p class="upload-subtitle">Fast, private transfers that expire on your terms.</p>
-      <label class="drop-zone" for="file-input">
+        {{end}}
-        <span class="drop-icon" aria-hidden="true">
+        <label class="drop-zone" for="file-input">
-          <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 16V4m0 0 4 4m-4-4-4 4M5 20h14" /></svg>
+          <span class="drop-icon" aria-hidden="true">
-        </span>
+            <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 16V4m0 0 4 4m-4-4-4 4M5 20h14" /></svg>
-        <span class="drop-title">Drop files to upload</span>
+          </span>
-        <span class="drop-copy">or click to browse</span>
+          <span class="drop-title">Drop files to upload</span>
-        <span class="drop-meta">Max file size: {{.Data.MaxUploadSize}} · {{.Data.LimitSummary}}</span>
+          <span class="drop-copy">or click to browse</span>
-        <input id="file-input" name="file" type="file" multiple>
+          <span class="drop-meta">Max file size: {{.Data.MaxUploadSize}} · {{.Data.LimitSummary}}</span>
-      </label>
+          <input id="file-input" name="file" type="file" multiple>
+        </label>
 
-      <details class="advanced-options">
+        <div class="upload-progress" id="upload-progress" hidden>
-        <summary>
+          <div class="progress-row">
-          <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+            <span>Uploading</span>
-          Advanced options
+            <span id="upload-status">Preparing...</span>
-        </summary>
+          </div>
+          <div class="progress"><span id="total-progress-bar"></span></div>
+        </div>
+        <div class="result-list upload-queue" id="upload-queue" hidden></div>
+      </div>
+    </div>
+
+    <div class="card upload-options">
+      <div class="card-content">
+        <h2 class="options-title">Upload options</h2>
         <div class="option-grid">
           {{if .CurrentUser}}
           <label>
+            <span>Collection</span>
             <select name="collection_id">
               <option value="">Unsorted</option>
               {{range .Data.Collections}}<option value="{{.ID}}">{{.Name}}</option>{{end}}
@@ -62,20 +73,11 @@
             <span>Hide file names/count until unlocked</span>
           </label>
         </div>
-      </details>
 
-      <div class="upload-progress" id="upload-progress" hidden>
+        <div class="form-footer">
-        <div class="progress-row">
+          <p id="file-summary">Choose one or more files to begin.</p>
-          <span>Uploading</span>
+          <button class="button button-primary" type="submit">Upload files</button>
-          <span id="upload-status">Preparing...</span>
         </div>
-        <div class="progress"><span id="total-progress-bar"></span></div>
-      </div>
-      <div class="result-list upload-queue" id="upload-queue" hidden></div>
-
-      <div class="form-footer">
-        <p id="file-summary">Choose one or more files to begin.</p>
-        <button class="button button-primary" type="submit">Upload files</button>
       </div>
     </div>
   </form>