From 9d0e017c15e2f828355e28bd168c47be74b46226 Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Mon, 7 Sep 2026 23:28:43 -0400
Subject: [PATCH] fix(admin): eliminate card-header overlap on narrow widths
 and fix long key wrapping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restructure the profiles card header so row 1 holds only the title
and action buttons (no more competing badge space), and row 2 is a
single flex-wrap group for admit/source/readonly badges — wraps
cleanly without colliding with any other element.

Also insert zero-width spaces after underscores in definition field
labels so long snake_case keys wrap at _ boundaries instead of
splitting mid-word, with title tooltip for the full key.
---
 admin/frontend/profiles.html | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/admin/frontend/profiles.html b/admin/frontend/profiles.html
index 3b128f7..0a588e6 100644
--- a/admin/frontend/profiles.html
+++ b/admin/frontend/profiles.html
@@ -90,9 +90,8 @@ header.navbar{padding-top:2px!important;padding-bottom:2px!important}
 /* Admitted/interactive counts -- compact badge in card header */
 .profile-admit-badge{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.82rem}
 /* Promoted definition rows -- larger/brighter than the old .78rem muted styling */
-.profile-field-label{color:var(--tblr-secondary);font-size:.8rem;font-weight:600;letter-spacing:.01em}
+.profile-field-label{color:var(--tblr-secondary);font-size:.8rem;font-weight:600;letter-spacing:.01em;overflow-wrap:break-word}
 .profile-field-val{color:rgba(255,255,255,.8);font-size:.92rem}
-.profile-zero-alert{margin-left:auto}
 /* Coverage note -- compact key:value row */
 .profile-coverage{font-size:.78rem;color:var(--tblr-secondary);margin-bottom:.5rem;line-height:1.3}
 .profile-coverage .profile-field-label{font-size:.76rem;font-weight:500;letter-spacing:normal}
@@ -469,8 +468,9 @@ function formatDefinition(def) {
     } else if (typeof val === 'object') {
       try { val = JSON.stringify(val); } catch (_) { val = String(val); }
     }
+    const displayKey = escapeHtml(key).replace(/_/g, '_\u200b');
     return `<div class="row g-0 mb-1">
-      <div class="col-5 profile-field-label">${escapeHtml(key)}</div>
+      <div class="col-5 profile-field-label" title="${escapeHtml(key)}">${displayKey}</div>
       <div class="col-7 profile-field-val">${escapeHtml(String(val))}</div>
     </div>`;
   }).join('');
@@ -544,12 +544,11 @@ function renderProfiles(profiles) {
               <span data-icon="${cardIcon}"></span>
               <h3 class="card-title mb-0">${escapeHtml(String(p.name || '—'))}</h3>
             </div>
-            <div class="d-flex align-items-center gap-2">${admitBadge}${zeroBadge}</div>
-          </div>
-          <div class="d-flex align-items-center justify-content-between mt-1">
-            <div class="card-subtitle text-muted">${sourceBadge(p.source)} ${readonlyHint}</div>
             ${actions}
           </div>
+          <div class="d-flex align-items-center flex-wrap gap-2 mt-1">
+            ${admitBadge}${zeroBadge}${sourceBadge(p.source)}${readonlyHint}
+          </div>
         </div>
         <div class="card-body">
           ${formatDefinition(p.definition)}
-- 
2.49.1