fix(ui): stack name above PIN in lock-codes-card chip; reduce name weight#1122
Merged
fix(ui): stack name above PIN in lock-codes-card chip; reduce name weight#1122
Conversation
…ight Long slot names were getting truncated to a single character in the lock-codes-card slot chip because the name had to share one row with the PIN bullets and reveal-eye icon (e.g. "Raman" → "R."). The chip isn't wide enough — especially on portrait sidebars and narrow grid columns — for both fields to coexist on one line. Switch the chip's content area to a stacked layout: name on its own line above, PIN bullets + eye on the line below. The name now gets the full chip width, so realistic names fit without aggressive truncation. The PIN row keeps its own justify-content rules so the eye icon stays right-anchored. While here, drop the slot-name from font-weight 500 → 400 and 15px → 14px. The slot card uses a prominent hero name because it's the focal point of a single-slot view, but in the lock-codes card chip the name is a label, not the focal point — the badges and PIN value carry the real signal. Lighter weight and smaller size make the chip read calmer, especially when six chips are tiled together. Tests: all 148 lock-codes-card tests pass; the change is purely CSS and doesn't affect any class names that tests assert on. Entire-Checkpoint: ac70a2e54aa4
github-actions
Bot
added
javascript
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1122 +/- ##
=======================================
Coverage 96.69% 96.69%
=======================================
Files 47 47
Lines 5515 5515
Branches 475 475
=======================================
Hits 5333 5333
Misses 182 182
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adjusts the lock-codes card chip layout so slot names and PINs no longer compete for the same horizontal space on narrow dashboards. It updates the source stylesheet and regenerates the frontend bundle that Home Assistant serves.
Changes:
- Stack chip content into two rows so the slot name sits above the PIN/reveal controls.
- Reduce slot-name typography prominence in the lock-codes card chip.
- Regenerate the shipped frontend bundle to include the stylesheet change.
Reviewed changes
Copilot reviewed 1 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
ts/lock-codes-card.styles.ts |
Updates chip layout and slot-name typography for the lock-codes card. |
custom_components/lock_code_manager/www/generated/lock-code-manager.js |
Regenerated frontend bundle reflecting the stylesheet update. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
193
to
+196
| .slot-content-row { | ||
| align-items: center; | ||
| display: flex; | ||
| gap: 12px; | ||
| justify-content: space-between; | ||
| flex-direction: column; | ||
| gap: 4px; |
Owner
Author
There was a problem hiding this comment.
Good catch — fixed in 9f5a3cd. Replaced the empty <span class="slot-name-row"></span> fallback with nothing so the row doesn't render at all in the unnamed-unmanaged case. The empty span was a leftover from the horizontal layout where it acted as a left-side flex placeholder; in the column layout it was producing a blank row above the PIN exactly as described.
Caught by Copilot in PR review: in the previous horizontal layout, emitting an empty <span class="slot-name-row"></span> when showName was false was harmless — it gave the row a left-side flex child so the PIN stayed right-aligned consistently across named and unnamed chips. Now that .slot-content-row stacks vertically, that empty span occupies its own row above the PIN, leaving an extra gap above the PIN on unnamed unmanaged chips. Replace the empty span with `nothing` so the row simply doesn't render in that case. showName is false only when the slot is *both* unnamed AND explicitly unmanaged (managed === false), which is the exact case the empty placeholder was masking. Entire-Checkpoint: c4e657654b55
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Proposed change
Per a screenshot showing slot names truncated to a single character (`Raman` → `R.`) in the lock-codes-card chip on a narrow column, splits the chip's content area into two stacked rows:
The chip isn't wide enough to hold both fields on one line, especially on portrait sidebars and narrow sections-grid columns.
While in there, also tones down the slot-name typography:
This intentionally diverges from the slot-card hero, which uses a prominent single-line bold name because it's the focal point of a single-slot view. In the lock-codes-card chip the name is a label — the badges (Active / Disabled / Managed) and the PIN value carry the real signal — so a lighter, smaller treatment lets six tiled chips read calmer together. Comment in the styles file calls out the deliberate divergence so future maintainers don't try to "fix" the inconsistency.
Before / after
Type of change
Additional information
Verification: 148/148 lock-codes-card tests pass (`yarn test --run ts/lock-codes-card.{,integration.}test.ts`); `yarn build` clean; `prek` clean. Pure CSS change — no test surface impact since tests only assert on `slot-name-pending-icon` (preserved), not on the layout-level classes that were edited.
I have not opened a live HA dev server to eyeball this — please verify in your dashboard before merging. The change is small enough that the regenerated `www/generated/lock-code-manager.js` should drop in without any manual cache-bust beyond what HACS normally does.
Checklist