fix(notes): make empty notes rows clickable on the budget page

The notes row was display:none when empty and revealed on entry-row
hover. Moving the cursor down to click the input left the entry row
and immediately hid the notes again, a classic hover-gap. Fix by
always rendering the row with a subtle 0.55 opacity when empty and
bumping it to 1.0 on its own hover or focus. Now the input is
always reachable without a hover dance.

Refs #19

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
archeious 2026-04-17 17:42:35 -06:00
parent 84d77b804c
commit 2f571b236e

View file

@ -523,11 +523,10 @@ tr.entry-notes-row input.notes-input::placeholder {
color: var(--rule); color: var(--rule);
font-style: italic; font-style: italic;
} }
tr.entry-notes-row:has(input:placeholder-shown) { display: none; } /* Empty notes render subtly (placeholder only) so they stay clickable. */
tr.entry:hover + tr.entry-notes-row:has(input:placeholder-shown) { tr.entry-notes-row:has(input:placeholder-shown) { opacity: 0.55; }
display: block; tr.entry-notes-row:hover,
opacity: 0.5; tr.entry-notes-row:has(input:focus) { opacity: 1; }
}
.tag { .tag {
font-family: var(--sans); font-family: var(--sans);