Zaki/Password-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(list): shrink the password pill and tooltip truncated names

Browse Source 
The list-view rule set `width: 110px`, but the base .entry-pw is `flex: 1`
(basis 0), so width was ignored and the pill stretched the full row width —
dragging the copy/open buttons to the far edge. `flex: 0 0 110px` pins it,
and the actions land right after it.

Names that ellipsise in the fixed-width title column (list) and the name
cell (table) now carry a title attr, so the full name shows on hover.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
r-zakarya
2026-07-22 11:50:52 +01:00
parent bef739b7ca
commit 506230f138
2 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+3 -2
View File
@@ -919,8 +919,9 @@ input[type="range"]::-webkit-slider-thumb {
.entry-grid.is-list .entry-pw { .entry-grid.is-list .entry-pw {
order: 3; order: 3;
font-size: 11px; font-size: 11px;
width: 110px; /* Full shorthand, not width: the base .entry-pw is `flex: 1` (basis 0),
flex-shrink: 0; which ignores width and let the pill stretch across the whole row. */
flex: 0 0 110px;
padding: 4px 8px; padding: 4px 8px;
background: var(--bg); background: var(--bg);
border-radius: 6px; border-radius: 6px;
js/app.js
+3 -2
View File
@@ -2825,7 +2825,8 @@ function renderCard(e) {
avatar.appendChild(checkbox); // NESTED inside avatar — no overlap avatar.appendChild(checkbox); // NESTED inside avatar — no overlap
head.appendChild(avatar); head.appendChild(avatar);
const title = el('div', { class: 'entry-title' }); const title = el('div', { class: 'entry-title' });
title.appendChild(el('b', null, displayName)); // title attr = native tooltip for the names the fixed-width column ellipsises.
title.appendChild(el('b', { title: displayName }, displayName));
// If user set a custom title AND it differs from site, optionally show // If user set a custom title AND it differs from site, optionally show
// site as a small subtitle. Hidden by default to keep cards clean — // site as a small subtitle. Hidden by default to keep cards clean —
// toggled via Settings > Appearance. // toggled via Settings > Appearance.
@@ -3334,7 +3335,7 @@ function renderTableRow(e) {
} }
td.appendChild(avatar); td.appendChild(avatar);
const nameWrap = el('span', { class: 'cell-name-wrap' }); const nameWrap = el('span', { class: 'cell-name-wrap' });
nameWrap.appendChild(el('b', null, entryDisplayName(e))); nameWrap.appendChild(el('b', { title: displayName }, displayName));
if (e.kind === 'note') { if (e.kind === 'note') {
const tplLbl = templateLabel(e.template); const tplLbl = templateLabel(e.template);
nameWrap.appendChild(el('span', nameWrap.appendChild(el('span',