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
alee commented 2026-09-08 03:28:54 +00:00
Owner
Copy Link

Problem

PR #56 merged a profiles page redesign, but two real regressions surfaced live:

  1. Card-header overlap at ~340px card width. The header had two rows both using justify-content-between, forcing badges and action buttons to compete for horizontal space. At narrow card width (the grid's minmax(340px) minimum), the admit badge (44 admitted · 40 interactive on 'batch' / 'bigboybritches') crowded into the title on row 1, and on row 2 the 'builtin' badge + lock icon + 'read-only' text overlapped into the copy-duplicate button on 'onlycheaps'.

  2. Long snake_case keys in formatDefinition() wrapped mid-word. Keys like max_cost_per_1m_completion_tokens split arbitrarily mid-word on the narrow onlycheaps card.

Fix — visual-engineering

Header restructure (Bug A)

  • Row 1 (justify-content-between): icon + title (left) vs action buttons ONLY (right). Badge elements removed from row 1 entirely, eliminating the title-vs-badge competition.
  • Row 2 (d-flex align-items-center flex-wrap gap-2): a single unified flex-wrap group containing ALL badges — admitBadge, zeroBadge, sourceBadge, readonlyHint. When they don't fit on one line they wrap cleanly onto a second line with no element sharing that line, so wrapping is impossible to collide with.
  • Removed the obsolete .profile-zero-alert{margin-left:auto} CSS hack (now unnecessary since we have a unified flex-wrap group).

Label wrapping (Bug B)

  • Inject zero-width space (\u200b) after every underscore in definition keys via .replace(/_/g, '_\u200b'). Browsers break at these ZWSP boundaries, so max_cost_per_1m_completion_tokens wraps at _ (e.g. max_cost_per_1m_ / completion_tokens), not mid-word.
  • Added title="" with full key to each <div class="profile-field-label"> and overflow-wrap:break-word to .profile-field-label for robust fallback.

Verification

Automated: 56 targeted tests pass (test_admin_frontend.py, test_admin_profiles.py). Full suite: 1512 passed, 9 pre-existing failures in classifier_backoff/gaming_mode (unrelated, confirmed pre-existing).

Visual (Playwright/chromium @ 340px card width):

  • Row 1: titleRight edge exactly abuts actionsLeft (no overlap on batch/bigboybritches/onlycheaps).
  • Row 2: badge group wraps to 2nd line cleanly, group height 50px > item height 22px, wrapping never collides with anything.
  • Long keys: max_cost_per_1m_completion renders wrapped at _ boundaries (confirmed via captured labels show ZWSP at break points, h=36px = 2 lines).

PR #56's design intent is preserved but rendered correctly at the narrowest realistic widths.

## Problem PR #56 merged a profiles page redesign, but two real regressions surfaced live: 1. **Card-header overlap at ~340px card width.** The header had two rows both using `justify-content-between`, forcing badges and action buttons to compete for horizontal space. At narrow card width (the grid's `minmax(340px)` minimum), the admit badge (`44 admitted · 40 interactive` on 'batch' / 'bigboybritches') crowded into the title on row 1, and on row 2 the 'builtin' badge + lock icon + 'read-only' text overlapped into the copy-duplicate button on 'onlycheaps'. 2. **Long snake_case keys in `formatDefinition()` wrapped mid-word.** Keys like `max_cost_per_1m_completion_tokens` split arbitrarily mid-word on the narrow onlycheaps card. ## Fix — visual-engineering ### Header restructure (Bug A) - **Row 1** (`justify-content-between`): icon + title (left) vs action buttons ONLY (right). Badge elements removed from row 1 entirely, eliminating the title-vs-badge competition. - **Row 2** (`d-flex align-items-center flex-wrap gap-2`): a single unified flex-wrap group containing ALL badges — `admitBadge`, `zeroBadge`, `sourceBadge`, `readonlyHint`. When they don't fit on one line they wrap cleanly onto a second line with no element sharing that line, so wrapping is impossible to collide with. - Removed the obsolete `.profile-zero-alert{margin-left:auto}` CSS hack (now unnecessary since we have a unified flex-wrap group). ### Label wrapping (Bug B) - Inject zero-width space (`\u200b`) after every underscore in definition keys via `.replace(/_/g, '_\u200b')`. Browsers break at these ZWSP boundaries, so `max_cost_per_1m_completion_tokens` wraps at `_` (e.g. `max_cost_per_1m_` / `completion_tokens`), not mid-word. - Added `title=""` with full key to each `<div class="profile-field-label">` and `overflow-wrap:break-word` to `.profile-field-label` for robust fallback. ## Verification **Automated:** 56 targeted tests pass (`test_admin_frontend.py`, `test_admin_profiles.py`). Full suite: 1512 passed, 9 pre-existing failures in classifier_backoff/gaming_mode (unrelated, confirmed pre-existing). **Visual (Playwright/chromium @ 340px card width):** - Row 1: titleRight edge exactly abuts actionsLeft (no overlap on batch/bigboybritches/onlycheaps). - Row 2: badge group wraps to 2nd line cleanly, group height 50px > item height 22px, wrapping never collides with anything. - Long keys: `max_cost_per_1m_completion` renders wrapped at `_` boundaries (confirmed via captured labels show ZWSP at break points, h=36px = 2 lines). PR #56's design intent is preserved but rendered correctly at the narrowest realistic widths.
alee added 1 commit 2026-09-08 03:28:54 +00:00
fix(admin): eliminate card-header overlap on narrow widths and fix long key wrapping 9d0e017c15 
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.
alee closed this pull request 2026-09-08 03:56:41 +00:00

Pull request closed

This pull request cannot be reopened because the branch was deleted.
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
alee
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: alee/6krrt#57
Delete Branch "fix/admin-profiles-page-polish"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?