Match Docker socket status to health-tile styling, fix restart-status spacing (v0.16.5)

README.md

@@ -12,7 +12,7 @@
     <img alt="Docker" src="https://img.shields.io/badge/Docker-ready-2496ED?logo=docker&logoColor=white">
     <img alt="Architectures" src="https://img.shields.io/badge/platform-amd64%20%7C%20arm64-5965F2">
     <img alt="Caddy" src="https://img.shields.io/badge/powered%20by-Caddy-1F88C0">
-    <img alt="Version" src="https://img.shields.io/badge/version-0.16.4-62E6A7">
+    <img alt="Version" src="https://img.shields.io/badge/version-0.16.5-62E6A7">
   </p>
   <p>
     <a href="#why-site-gateway">Why Site Gateway</a> ·

ROADMAP.md

@@ -136,3 +136,5 @@ Roughly in priority order:
 `v0.16.3` fixes the System tab's real population and layout bugs reported after v0.16.2 went live. Root cause of the empty sections and the tab "flickering" on refresh: the System panel is created dynamically (like Groups, Audit log, and API Access) the first time `refresh()` runs after login, but the app's render order calls the tab-visibility toggle *before* that panel exists — so a brand-new panel is created already carrying the `hidden` class, and `renderSystemStatus()` was guarded to skip populating anything while its panel was hidden. Result: on first render nothing gets filled in, and only after the *next* periodic poll (once the panel exists and the visibility toggle can find and unhide it) does it get one more chance — which looked like the tab disappearing and reappearing. Fix: `renderSystemStatus()` now always populates its content regardless of the panel's current visibility, matching how every other dynamically-created admin panel (Groups, Retention, API Access) already behaves. Also added the missing spacing between the System tab's stacked `.dashboard-panel` cards (`[data-admin-panel="system"]>.dashboard-panel+.dashboard-panel{margin-top:18px}`) — the generic `.settings-panel` wrapper never had a gap rule for its children, so the cards were rendering edge-to-edge.
 
 `v0.16.4` rewords the Reload & Restart section's "Docker socket not detected" message so it no longer reads as a duplicate of the Docker container-selection message elsewhere on the System tab. Both checks are independent (one gates the proxy-target container picker, the other gates whether Site Gateway can confirm this container will actually come back up before offering a restart), but they previously used the exact same sentence, which looked like a copy-paste mistake. No behavior change — the Restart button is still disabled under the same conditions as before.
+
+`v0.16.5` gives the Docker container-selection status its own `.health-tile` card (matching `BACKUP_PASSWORD` directly above it) instead of a plain paragraph — the two Environment/Integrations rows now look consistent whether Docker's socket is mounted or not. Also adds breathing room between the Reload & Restart buttons and the status line beneath them, which was sitting flush against the button row.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "site-gateway",
-  "version": "0.16.4",
+  "version": "0.16.5",
   "private": true,
   "description": "Site Gateway: simple self-hosted website publishing, reverse proxying, and automatic HTTPS.",
   "type": "module",

src/public/features.js

@@ -453,7 +453,7 @@ function renderDockerPanel() {
   if (!section) {
     section = document.createElement("div");
     section.className = "docker-integration-section";
-    section.innerHTML = '<p class="docker-integration-heading">Docker container selection</p><p class="muted" id="docker-integration-help"></p><label class="check-control"><input id="docker-integration-toggle" type="checkbox"><span>Let Proxy and Streaming hosts pick a running container as their target</span></label>';
+    section.innerHTML = '<p class="docker-integration-heading">Docker container selection</p><div class="health-tile" id="docker-integration-status"><span class="status-dot"></span><span class="health-tile-copy"><strong>Docker socket</strong><small id="docker-integration-help"></small></span></div><label class="check-control"><input id="docker-integration-toggle" type="checkbox"><span>Let Proxy and Streaming hosts pick a running container as their target</span></label>';
     panel.append(section);
     section.querySelector("#docker-integration-toggle").addEventListener("change", async event => {
       const checkbox = event.currentTarget;
@@ -466,6 +466,7 @@ function renderDockerPanel() {
   const toggle = section.querySelector("#docker-integration-toggle");
   toggle.checked = enabled;
   toggle.disabled = !socketMounted;
+  section.querySelector("#docker-integration-status .status-dot").className = `status-dot ${socketMounted ? "running" : "idle"}`;
   section.querySelector("#docker-integration-help").textContent = socketMounted
     ? "Site Gateway reads the Docker socket read-only to list running containers, and only offers containers that share a Docker network with it."
     : "Docker socket not detected — mount /var/run/docker.sock into this container to enable container selection.";

src/public/index.html

@@ -8,7 +8,7 @@
   <title>Site Gateway</title>
   <meta name="description" content="Host sites, proxy services, and manage HTTPS from one simple dashboard.">
   <link rel="icon" type="image/png" href="/site-gateway-icon-approved.png">
-  <link rel="stylesheet" href="/styles.css?v=0.16.4">
+  <link rel="stylesheet" href="/styles.css?v=0.16.5">
 </head>
 
 <!-- ================================================================
@@ -439,6 +439,6 @@
   <div id="toast" class="toast" role="status"></div>
   <div id="update-banner" class="update-banner hidden" role="status"><span>A new version of Site Gateway is available.</span><div class="update-banner-actions"><button id="update-banner-refresh" class="button primary">Refresh</button><button id="update-banner-dismiss" class="text-button">Dismiss</button></div></div>
   <!-- App scripts: core (app.js) then extended views/admin (features.js) -->
-  <script src="/app.js?v=0.16.4" defer></script><script src="/features.js?v=0.16.4" defer></script><script src="/select-enhance.js?v=0.16.4" defer></script>
+  <script src="/app.js?v=0.16.5" defer></script><script src="/features.js?v=0.16.5" defer></script><script src="/select-enhance.js?v=0.16.5" defer></script>
 </body>
 </html>

src/public/styles.css

@@ -775,7 +775,9 @@ label.check-control:has(input[name="upstreamTlsInsecure"]) small{position:absolu
 
 .docker-integration-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
 .docker-integration-heading{font-weight:600;margin:0 0 var(--space-2)}
+.docker-integration-section .health-tile{margin-bottom:var(--space-3)}
 .docker-integration-section .check-control{margin-top:var(--space-3)}
+#system-restart-status{margin-top:var(--space-3)}
 
 /* Custom-drawn select (Task #20): native <select> popups can't be reliably themed dark across
    browsers, so this replaces the popup only -- the native select stays for value/form/event