From 15120a280f1a335a5e27baf37e6b323b1b2d46e8 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sun, 10 May 2026 23:15:15 -0400
Subject: [PATCH] CSS: remove remaining fixable inline styles across templates

- Suppress modal form groups: strip margin-bottom:12px (lt-form-group
  already has margin-bottom in TDS); use lt-form-group--last for the
  final group where zero margin is needed
- Keyboard shortcuts table: remove width:100% (lt-table is already full-
  width in base.css)
- Settings divider: replace style=margin override with .lt-divider--compact
- Topology bus section: move max-width:860px into .topo-bus-section rule

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/style.css     |  7 +++++++
 templates/base.html  | 14 +++++++-------
 templates/index.html |  2 +-
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/static/style.css b/static/style.css
index ab073c6..df726bc 100644
--- a/static/style.css
+++ b/static/style.css
@@ -118,6 +118,12 @@
   padding: 0.2rem 0.45rem;
 }
 
+/* ── Form group modifiers ────────────────────────────────────────── */
+.lt-form-group--last { margin-bottom: 0; }
+
+/* ── Divider compact variant ─────────────────────────────────────── */
+.lt-divider--compact { margin: 1rem 0 0.75rem; }
+
 /* ── Topology section collapse toggle ────────────────────────────── */
 .topo-collapse-btn {
   margin-left: auto;
@@ -520,6 +526,7 @@
 /* Bus rails */
 .topo-bus-section {
   width: 100%;
+  max-width: 860px;
   display: flex;
   flex-direction: column;
   align-items: stretch;
diff --git a/templates/base.html b/templates/base.html
index 8e5b2b0..2d83bba 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -207,7 +207,7 @@
       </div>
       <form id="suppress-form">
         <div class="lt-modal-body">
-          <div class="lt-form-group" style="margin-bottom:12px">
+          <div class="lt-form-group">
             <label class="lt-label" for="sup-type">Target Type</label>
             <select class="lt-select" id="sup-type" name="target_type">
               <option value="host">Host (all interfaces)</option>
@@ -216,20 +216,20 @@
               <option value="all">Global Maintenance</option>
             </select>
           </div>
-          <div class="lt-form-group" id="sup-name-group" style="margin-bottom:12px">
+          <div class="lt-form-group" id="sup-name-group">
             <label class="lt-label" for="sup-name">Target Name</label>
             <input type="text" class="lt-input" id="sup-name" name="target_name" placeholder="e.g. large1">
           </div>
-          <div class="lt-form-group" id="sup-detail-group" style="margin-bottom:12px;display:none">
+          <div class="lt-form-group" id="sup-detail-group" style="display:none">
             <label class="lt-label" for="sup-detail">Interface <span class="lt-field-hint">(interface type only)</span></label>
             <input type="text" class="lt-input" id="sup-detail" name="target_detail" placeholder="e.g. enp35s0">
           </div>
-          <div class="lt-form-group" style="margin-bottom:12px">
+          <div class="lt-form-group">
             <label class="lt-label" for="sup-reason">Reason <span class="required">*</span></label>
             <input type="text" class="lt-input" id="sup-reason" name="reason"
                    placeholder="e.g. Planned switch reboot" required>
           </div>
-          <div class="lt-form-group" style="margin-bottom:0">
+          <div class="lt-form-group lt-form-group--last">
             <label class="lt-label">Duration</label>
             <div class="duration-pills">
               <button type="button" class="pill" data-duration="30">30 min</button>
@@ -258,7 +258,7 @@
         <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">&#x2715;</button>
       </div>
       <div class="lt-modal-body">
-        <table class="lt-table" style="width:100%">
+        <table class="lt-table">
           <thead><tr><th>Shortcut</th><th>Action</th></tr></thead>
           <tbody>
             <tr><td>Ctrl / &#x2318; + K</td><td>Command palette</td></tr>
@@ -295,7 +295,7 @@
           </div>
           <div class="lt-field-hint" id="settings-refresh-hint"></div>
         </div>
-        <div class="lt-divider" style="margin:1rem 0 0.75rem"></div>
+        <div class="lt-divider lt-divider--compact"></div>
         <div class="lt-kv-grid">
           <span class="lt-kv-key">User</span>
           <span class="lt-kv-val lt-kv-val--cyan">{{ user.name or user.username }}</span>
diff --git a/templates/index.html b/templates/index.html
index a82abbc..c03bbad 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -253,7 +253,7 @@
          TIER 4 connecting bus – two rails (10G green + 1G amber dashed)
          showing dual-homing for all 6 servers
          ══════════════════════════════════════════════════════════ -->
-    <div class="topo-bus-section" style="max-width:860px;">
+    <div class="topo-bus-section">
 
       <!-- 10G storage bus (Agg → VLAN90) -->
       <div class="topo-bus-10g">