From fd2aa64d989a6bc4f5ea0f4683190ec930dea044 Mon Sep 17 00:00:00 2001 From: CallMeTechie <34693633+CallMeTechie@users.noreply.github.com> Date: Tue, 23 Jun 2026 16:08:30 +0200 Subject: [PATCH] =?UTF-8?q?fix(theme):=20Aurora=20=E2=80=94=20card=20statu?= =?UTF-8?q?s=20badges,=20table=20headers,=20gateway=20card=20header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Several Aurora layout bugs reported on peers/gateways/rdp/routes: - Status badges collapsed to ~20px and their text bled into neighbours (peers 'Online' into the gear, gateways 'Online' cut off at the card edge, rdp 'Reachable' cut off + badge row crammed). Root cause: pro.css's standalone .tag-dot is a 5px dot (width/height:5px); the cards combine it as 'tag tag-dot' on one element, so the dot dimensions collapsed the label. Reset with .tag.tag-dot{width:auto;height:auto} + .tag{white-space:nowrap}. - Data-table column headers (peers, routes) clung to the top edge / were clipped: th had padding:0 14px 11px. Changed to 12px 14px + vertical-align. - Gateway fleet card: moved update-check to a top-right icon button (left: status badge, right: refresh icon) and dropped the full-width 'Check update' button; the name now ellipsis-truncates so the header never overflows. The .recheck class + data-id are kept so the existing probe() handler still fires. Aurora-only (aurora.css + gateways.js isAurora path); default/pro untouched. Verified headless dark+light; aurora_theme.test 144/0. --- public/css/aurora.css | 8 ++++++-- public/js/gateways.js | 21 +++++++++++++-------- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/public/css/aurora.css b/public/css/aurora.css index 841cd4ee..a717f0c4 100644 --- a/public/css/aurora.css +++ b/public/css/aurora.css @@ -282,7 +282,7 @@ a{color:inherit} --------------------------------------------------------------------------- */ .data-table{width:100%; border-collapse:collapse; font-size:13.5px} .data-table th{text-align:left; font-weight:600; color:var(--faint); font-size:11px; text-transform:uppercase; letter-spacing:.06em; - padding:0 14px 11px; border-bottom:1px solid var(--line)} + padding:12px 14px; vertical-align:middle; border-bottom:1px solid var(--line)} .data-table td{padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle} .data-table tr:last-child td{border-bottom:0} .data-table tbody tr:hover td{background:var(--chip)} @@ -410,7 +410,7 @@ input[type=date]:focus, select:focus { /* ---------------------------------------------------------------------------- 11 · TAGS / BADGES / STATUS DOTS (production: .tag/.tag-*, .status-dot/.online…) --------------------------------------------------------------------------- */ -.tag{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--line); font-family:var(--font-body)} +.tag{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--line); font-family:var(--font-body); white-space:nowrap} .tag-green{color:var(--green); background:var(--green-bg); border-color:var(--green-bd)} .tag-grey{color:var(--faint); background:var(--chip)} .tag-amber{color:var(--amber); background:var(--amber-bg); border-color:var(--amber-bd)} @@ -623,6 +623,10 @@ input[type=date]:focus, select:focus { /* tag-dot helper used in Aurora status tags on gateway/peer rows. Issue 9: text LEFT of dot — suppress ::before, put dot via ::after */ +/* pro.css's standalone .tag-dot is a 5px dot; when combined as `tag tag-dot` on + one element (card status badges) it would force width/height:5px and collapse + the label. Reset so the text shows; aurora renders the dot via ::after. */ +.tag.tag-dot{width:auto;height:auto} .tag.tag-dot::before{content:none} .tag.tag-dot::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-left:5px} diff --git a/public/js/gateways.js b/public/js/gateways.js index 6a6018a2..48b4466e 100644 --- a/public/js/gateways.js +++ b/public/js/gateways.js @@ -72,15 +72,23 @@ var uh = el('div', 'uh'); var uav = el('span', 'uav'); uav.style.background = gwAvatarGradient(g); uav.appendChild(gwCardIcon()); uh.appendChild(uav); - var nameWrap = el('div'); - nameWrap.appendChild(el('div', 'un', g.name)); + var nameWrap = el('div'); nameWrap.style.cssText = 'flex:1;min-width:0;overflow:hidden'; + var unEl = el('div', 'un', g.name); unEl.style.cssText = 'white-space:nowrap;overflow:hidden;text-overflow:ellipsis'; + nameWrap.appendChild(unEl); nameWrap.appendChild(el('div', 'ud', (t.gateway_version || '—') + (g.hostname ? ' · ' + g.hostname : ''))); uh.appendChild(nameWrap); var tagCls = 'tag ' + (st === 'online' ? 'tag-green' : st === 'degraded' ? 'tag-amber' : 'tag-grey') + ' tag-dot'; var stTag = el('span', tagCls, T('gateways.' + st, st)); - // Issue 8: badge INSIDE card header — wrap in right container pushed to far-right - var right = el('span'); right.style.cssText = 'margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex-shrink:0'; + // Header right cluster: status badge (left) + update-check icon (right). + var right = el('span'); right.style.cssText = 'margin-left:auto;display:inline-flex;align-items:center;gap:8px;flex-shrink:0'; right.appendChild(stTag); + // Update-check icon button (.recheck → grid click handler → probe()); replaces + // the former full-width "Check update" button at the card foot. + var rcBtn = el('button', 'icon-action recheck'); rcBtn.dataset.id = g.peer_id; + rcBtn.title = T('gateways.update_check', 'Check update'); + rcBtn.setAttribute('aria-label', rcBtn.title); + rcBtn.innerHTML = ''; + right.appendChild(rcBtn); uh.appendChild(right); wrap.appendChild(uh); // Body: resource bars (online/degraded) or empty-state (offline) @@ -94,10 +102,7 @@ if (t.mem_total) { var mp = pct(t.mem_used, t.mem_total); auroraResRow(wrap, 'RAM', mp + '%', mp, mp > 90); } if (t.disk && t.disk.total) { var dp = pct(t.disk.used, t.disk.total); auroraResRow(wrap, T('gateways.lbl_disk', 'Disk'), dp + '%', dp, dp > 85); } } - // Update-check / recheck button (.recheck class → grid click handler → probe()) - var btn = el('button', 'btn btn-ghost btn-sm btn-block recheck', T('gateways.update_check', 'Check update')); - btn.style.marginTop = '14px'; btn.dataset.id = g.peer_id; - wrap.appendChild(btn); + // (Update-check moved to the header icon button above.) return wrap; } // Issue 10: Aurora-specific versions card — vertical kv list to prevent overflow