alee/6krrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin): eliminate card-header overlap on narrow widths and fix long key wrapping #57

Closed
alee wants to merge 1 commits from fix/admin-profiles-page-polish into main
pull from: fix/admin-profiles-page-polish
merge into: alee:main
Conversation 0 Commits 1 Files Changed 1 +6 -7
1 changed files with 6 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
admin/frontend/profiles.html
View File

@@ -90,9 +90,8 @@ header.navbar{padding-top:2px!important;padding-bottom:2px!important}
/* Admitted/interactive counts -- compact badge in card header */ /* Admitted/interactive counts -- compact badge in card header */
.profile-admit-badge{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.82rem} .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 */ /* 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-field-val{color:rgba(255,255,255,.8);font-size:.92rem}
.profile-zero-alert{margin-left:auto}
/* Coverage note -- compact key:value row */ /* Coverage note -- compact key:value row */
.profile-coverage{font-size:.78rem;color:var(--tblr-secondary);margin-bottom:.5rem;line-height:1.3} .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} .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') { } else if (typeof val === 'object') {
try { val = JSON.stringify(val); } catch (_) { val = String(val); } try { val = JSON.stringify(val); } catch (_) { val = String(val); }
} }
const displayKey = escapeHtml(key).replace(/_/g, '_\u200b');
return `<div class="row g-0 mb-1"> 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 class="col-7 profile-field-val">${escapeHtml(String(val))}</div>
</div>`; </div>`;
}).join(''); }).join('');
@@ -544,12 +544,11 @@ function renderProfiles(profiles) {
<span data-icon="${cardIcon}"></span> <span data-icon="${cardIcon}"></span>
<h3 class="card-title mb-0">${escapeHtml(String(p.name || '—'))}</h3> <h3 class="card-title mb-0">${escapeHtml(String(p.name || '—'))}</h3>
</div> </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} ${actions}
</div> </div>
<div class="d-flex align-items-center flex-wrap gap-2 mt-1">
${admitBadge}${zeroBadge}${sourceBadge(p.source)}${readonlyHint}
</div>
</div> </div>
<div class="card-body"> <div class="card-body">
${formatDefinition(p.definition)} ${formatDefinition(p.definition)}