From 8db5841b300f61c052d21e16a1374e3ec31273ca Mon Sep 17 00:00:00 2001
From: Juan Denis <jhd3197@gmail.com>
Date: Tue, 23 Jun 2026 01:17:14 -0400
Subject: [PATCH] fix(ssl): restore SSL status-bar layout

The .ssl-status-* classes were borrowed "from _domains.scss", but that
borrow broke when Domains migrated to MetricCard - leaving the Certbot /
Certificates / Expiring Soon cards as an unstyled vertical stack at the
top-left. Define them locally in _ssl.scss as a 3-up grid of stat cards.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/styles/pages/_ssl.scss | 48 +++++++++++++++++++++++++----
 1 file changed, 42 insertions(+), 6 deletions(-)

diff --git a/frontend/src/styles/pages/_ssl.scss b/frontend/src/styles/pages/_ssl.scss
index 2df09223..a8c65518 100644
--- a/frontend/src/styles/pages/_ssl.scss
+++ b/frontend/src/styles/pages/_ssl.scss
@@ -2,15 +2,51 @@
 // SSL CERTIFICATES PAGE
 // ============================================
 
-.ssl-page {
-    // Reuses .ssl-status-bar, .ssl-status-item, etc. from _domains.scss
+// Status bar — a row of stat cards (Certbot / Certificates / Expiring Soon).
+// These classes used to be borrowed from _domains.scss, but were dropped when the
+// Domains page moved to MetricCard — so they're defined here now. Without them the
+// status items collapsed into an unstyled vertical stack at the top-left.
+.ssl-status-bar {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: $space-4;
+    margin-bottom: $space-5;
+
+    @media (max-width: $breakpoint-md) { grid-template-columns: 1fr; }
+}
+
+.ssl-status-item {
+    @include flex-start();
+    gap: $space-3;
+    padding: $space-4;
+    background: var(--surface);
+    border: 1px solid $border-subtle;
+    border-radius: $radius-lg;
 }
 
-// Warning icon color variant
 .ssl-status-icon {
-    &.warning {
-        background: $warning-bg;
-        color: $warning;
+    @include icon-box();
+    background: var(--surface-2);
+    color: $text-tertiary;
+
+    &.active { background: $success-bg; color: $success; }
+    &.inactive { background: var(--surface-2); color: $text-tertiary; }
+    &.warning { background: $warning-bg; color: $warning; }
+}
+
+.ssl-status-info {
+    min-width: 0;
+
+    h4 {
+        margin: 0 0 2px;
+        font-size: $font-size-sm;
+        font-weight: $font-weight-semibold;
+        color: $text-primary;
+    }
+
+    span {
+        font-size: $font-size-xs;
+        color: $text-tertiary;
     }
 }