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

style(list): align the password column across rows

Browse Source 
List view faked a table with flex+order, but the title used flex:1 so it
absorbed all free space — and since trailing content (tags/folder/actions)
varies per row, the fixed-width pw pill landed at a different x on each row.
Give the title a fixed 240px track so pw starts at the same x everywhere;
move the free-space absorption to margin-left:auto on the trailing group
(entry-meta + order-6 actions) so they still float to the far right. Copy +
globe stay in .entry-pw-row (order 4), pinned next to the pw.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
r-zakarya
2026-07-13 21:58:46 +01:00
parent 90a696b1a8
commit 0404fc65a4
1 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+16 -2
View File
@@ -894,7 +894,12 @@ input[type="range"]::-webkit-slider-thumb {
} }
.entry-grid.is-list .entry-title { .entry-grid.is-list .entry-title {
order: 2; order: 2;
flex: 1; /* Fixed track (not flex:1) so the password field that follows starts at
the SAME x on every row — otherwise variable trailing content
(tags/folder/icons) let the title grow by different amounts and the
pw pill drifted left/right per row. Short names leave whitespace;
long names ellipsise. */
flex: 0 0 240px;
min-width: 0; min-width: 0;
display: flex; flex-direction: column; display: flex; flex-direction: column;
} }
@@ -918,7 +923,10 @@ input[type="range"]::-webkit-slider-thumb {
.entry-grid.is-list .entry-meta { .entry-grid.is-list .entry-meta {
order: 5; order: 5;
margin: 0; /* Absorb the free space freed up by the now-fixed title, pushing tags/
folder + the order-6 actions to the far right while pw stays put.
(When a row has no meta, the order-6 rule below carries the auto.) */
margin: 0 0 0 auto;
flex-shrink: 0; flex-shrink: 0;
max-width: 220px; max-width: 220px;
overflow: hidden; overflow: hidden;
@@ -939,6 +947,12 @@ input[type="range"]::-webkit-slider-thumb {
order: 6; order: 6;
flex-shrink: 0; flex-shrink: 0;
} }
/* First trailing action floats right too, so rows WITHOUT an entry-meta
still push their actions to the far edge (margin-left:auto on the first
flex item consumes the free space; later ones are no-ops). */
.entry-grid.is-list .entry-fav,
.entry-grid.is-list .entry-kebab-wrap,
.entry-grid.is-list .entry-head .icon-btn { margin-left: auto; }
/* Selection checkbox overlay — nested INSIDE the avatar (.entry-avatar /* Selection checkbox overlay — nested INSIDE the avatar (.entry-avatar
is position:relative) so it covers the avatar 1:1, no overlap with the is position:relative) so it covers the avatar 1:1, no overlap with the
avatar's footprint. Hidden by default; appears on card hover OR when avatar's footprint. Hidden by default; appears on card hover OR when