Process 1 build 0203261608

frontend/app/admin/SettingsPage.tsx

@@ -1613,11 +1613,11 @@ export default function SettingsPage({ section }: SettingsPageProps) {
     >
       {status && <div className="error-banner">{status}</div>}
       {settingsSections.length > 0 ? (
-      <div className="admin-form">
+      <div className="admin-form admin-zone-stack">
         {settingsSections
           .filter(shouldRenderSection)
           .map((sectionGroup) => (
-          <section key={sectionGroup.key} className="admin-section">
+          <section key={sectionGroup.key} className="admin-section admin-zone">
             <div className="section-header">
               <h2>
                 {sectionGroup.key === 'requests' ? 'Request sync controls' : sectionGroup.title}
@@ -2228,6 +2228,7 @@ export default function SettingsPage({ section }: SettingsPageProps) {
               ) : null}
               <button
                 type="button"
+                className="settings-action-button"
                 onClick={() => void saveSettingGroup(sectionGroup)}
                 disabled={sectionSaving[sectionGroup.key] || sectionTesting[sectionGroup.key]}
               >
@@ -2236,7 +2237,7 @@ export default function SettingsPage({ section }: SettingsPageProps) {
               {getSectionTestLabel(sectionGroup.key) ? (
                 <button
                   type="button"
-                  className="ghost-button"
+                  className="ghost-button settings-action-button"
                   onClick={() => void testSettingGroup(sectionGroup)}
                   disabled={sectionSaving[sectionGroup.key] || sectionTesting[sectionGroup.key]}
                 >
@@ -2257,7 +2258,7 @@ export default function SettingsPage({ section }: SettingsPageProps) {
       </div>
       )}
       {showLogs && (
-      <section className="admin-section" id="logs">
+      <section className="admin-section admin-zone" id="logs">
         <div className="section-header">
           <h2>Activity log</h2>
           <div className="log-actions">
@@ -2283,7 +2284,7 @@ export default function SettingsPage({ section }: SettingsPageProps) {
       </section>
       )}
       {showCacheExtras && (
-      <section className="admin-section" id="cache">
+      <section className="admin-section admin-zone" id="cache">
         <div className="section-header">
           <h2>Saved requests (cache)</h2>
         </div>
@@ -2312,7 +2313,7 @@ export default function SettingsPage({ section }: SettingsPageProps) {
       </section>
       )}
       {showMaintenance && (
-      <section className="admin-section" id="maintenance">
+      <section className="admin-section admin-zone" id="maintenance">
         <div className="section-header">
           <h2>Maintenance</h2>
         </div>
@@ -2379,7 +2380,7 @@ export default function SettingsPage({ section }: SettingsPageProps) {
       </section>
       )}
       {showRequestsExtras && (
-      <section className="admin-section" id="schedules">
+      <section className="admin-section admin-zone" id="schedules">
         <div className="section-header">
           <h2>Scheduled tasks</h2>
         </div>

frontend/app/globals.css

@@ -1545,6 +1545,13 @@ button span {
   align-items: end;
 }
 
+.settings-section-actions .settings-action-button {
+  width: 190px;
+  min-width: 190px;
+  flex: 0 0 190px;
+  justify-content: center;
+}
+
 .settings-inline-field {
   display: grid;
   gap: 6px;
@@ -6214,6 +6221,12 @@ textarea {
     width: 100%;
   }
 
+  .settings-section-actions .settings-action-button {
+    width: 100%;
+    min-width: 0;
+    flex-basis: auto;
+  }
+
   .sync-meta,
   .diagnostic-card-top,
   .diagnostics-category-header,
@@ -6233,3 +6246,166 @@ textarea {
     overflow-wrap: anywhere;
   }
 }
+
+/* Final admin shell + settings section cleanup */
+.admin-shell,
+.admin-shell-nav,
+.admin-card,
+.admin-shell-rail,
+.admin-sidebar,
+.admin-panel {
+  min-width: 0;
+}
+
+.admin-shell {
+  display: grid;
+  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
+  grid-template-areas: "nav main";
+  gap: 22px;
+  align-items: start;
+}
+
+.admin-shell.admin-shell--with-rail {
+  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(300px, 380px);
+  grid-template-areas: "nav main rail";
+}
+
+.admin-shell-nav {
+  grid-area: nav;
+}
+
+.admin-card {
+  grid-area: main;
+}
+
+.admin-shell-rail {
+  grid-area: rail;
+  position: sticky;
+  top: 20px;
+  align-self: start;
+  display: grid;
+  gap: 10px;
+}
+
+.admin-zone-stack {
+  gap: 18px;
+}
+
+.admin-zone {
+  display: grid;
+  gap: 14px;
+  padding: 18px;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
+    rgba(255, 255, 255, 0.012);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
+}
+
+[data-theme='light'] .admin-zone {
+  border-color: rgba(17, 19, 24, 0.08);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.72)),
+    rgba(17, 19, 24, 0.018);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+
+.admin-zone .section-header {
+  align-items: flex-start;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+[data-theme='light'] .admin-zone .section-header {
+  border-bottom-color: rgba(17, 19, 24, 0.08);
+}
+
+.admin-zone .section-header h2 {
+  position: relative;
+  display: inline-block;
+  padding-bottom: 8px;
+}
+
+.admin-zone .section-header h2::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 52px;
+  height: 2px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--accent-2), rgba(255, 255, 255, 0));
+}
+
+.admin-zone .section-subtitle {
+  margin-top: -4px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+@media (max-width: 1280px) {
+  .admin-shell {
+    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
+    grid-template-areas: "nav main";
+  }
+
+  .admin-shell.admin-shell--with-rail {
+    grid-template-areas:
+      "nav main"
+      "nav rail";
+  }
+
+  .admin-shell-rail {
+    position: static;
+    top: auto;
+    width: 100%;
+  }
+}
+
+@media (max-width: 1080px) {
+  .admin-shell,
+  .admin-shell.admin-shell--with-rail {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 16px;
+  }
+
+  .admin-shell {
+    grid-template-areas:
+      "nav"
+      "main";
+  }
+
+  .admin-shell.admin-shell--with-rail {
+    grid-template-areas:
+      "nav"
+      "main"
+      "rail";
+  }
+
+  .admin-shell-nav,
+  .admin-card,
+  .admin-shell-rail {
+    width: 100%;
+  }
+
+  .admin-shell-nav {
+    position: static;
+    top: auto;
+  }
+
+  .admin-grid,
+  .users-page-toolbar-grid,
+  .users-summary-grid,
+  .users-page-overview-grid,
+  .maintenance-action-grid,
+  .schedule-grid,
+  .diagnostics-inline-summary,
+  .diagnostics-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-zone {
+    padding: 16px;
+  }
+}

frontend/app/ui/AdminShell.tsx

@@ -12,8 +12,10 @@ type AdminShellProps = {
 }
 
 export default function AdminShell({ title, subtitle, actions, rail, children }: AdminShellProps) {
+  const hasRail = Boolean(rail)
+
   return (
-    <div className="admin-shell">
+    <div className={`admin-shell ${hasRail ? 'admin-shell--with-rail' : 'admin-shell--no-rail'}`}>
       <aside className="admin-shell-nav">
         <AdminSidebar />
       </aside>
@@ -27,16 +29,7 @@ export default function AdminShell({ title, subtitle, actions, rail, children }:
         </div>
         {children}
       </main>
-      <aside className="admin-shell-rail">
-        {rail ?? (
-          <div className="admin-rail-card admin-rail-card--placeholder">
-            <span className="admin-rail-eyebrow">Insights</span>
-            <h2>Stats rail</h2>
-            <p>Use this column for counters, live status, and quick metrics for this page.</p>
-            <span className="small-pill">{title}</span>
-          </div>
-        )}
-      </aside>
+      {hasRail ? <aside className="admin-shell-rail">{rail}</aside> : null}
     </div>
   )
 }