From 506230f138283ee41e436a677a6a2b67a610fd05 Mon Sep 17 00:00:00 2001
From: r-zakarya <82443831+r-zakarya@users.noreply.github.com>
Date: Wed, 22 Jul 2026 11:50:52 +0100
Subject: [PATCH] fix(list): shrink the password pill and tooltip truncated
 names
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 css/style.css | 5 +++--
 js/app.js     | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/css/style.css b/css/style.css
index 7d7f1f7..ba61d7a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -919,8 +919,9 @@ input[type="range"]::-webkit-slider-thumb {
 .entry-grid.is-list .entry-pw {
     order: 3;
     font-size: 11px;
-    width: 110px;
-    flex-shrink: 0;
+    /* Full shorthand, not width: the base .entry-pw is `flex: 1` (basis 0),
+       which ignores width and let the pill stretch across the whole row. */
+    flex: 0 0 110px;
     padding: 4px 8px;
     background: var(--bg);
     border-radius: 6px;
diff --git a/js/app.js b/js/app.js
index 55ca7fd..e0a381b 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2825,7 +2825,8 @@ function renderCard(e) {
     avatar.appendChild(checkbox);   // NESTED inside avatar — no overlap
     head.appendChild(avatar);
     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
     // site as a small subtitle. Hidden by default to keep cards clean —
     // toggled via Settings > Appearance.
@@ -3334,7 +3335,7 @@ function renderTableRow(e) {
                 }
                 td.appendChild(avatar);
                 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') {
                     const tplLbl = templateLabel(e.template);
                     nameWrap.appendChild(el('span',