From 1b3d7f5698935144746aa24e7ffc5aff24512d3b Mon Sep 17 00:00:00 2001 From: StyxX65 <150797939+StyxX65@users.noreply.github.com> Date: Wed, 10 Jun 2026 11:24:00 +0200 Subject: [PATCH] Fix card action buttons clipped in grid view (missing position:relative) The real cause behind the invisible redact/delete buttons: .card lacked position:relative, so the position:absolute action buttons (delete, redact) and the bulk-select checkbox anchored to the viewport instead of the card and were clipped by .card overflow:hidden. They only showed in list view, where those elements are position:static. Add position:relative to .card so all three position within each card. Keep the 0.35 baseline opacity on the redact button for discoverability. Co-Authored-By: Claude Fable 5 --- CHANGELOG.md | 2 +- static/style.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 846ac33..e6b7b44 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,7 +27,7 @@ Version numbers follow [Semantic Versioning](https://semver.org/spec/v2.0.0.html - **Settings modal too narrow for seven tabs** — widened from 640 px to 720 px so all tab labels fit on one line without wrapping. -- **Redact (✏) button invisible in grid view** — `.card-redact-btn` had `opacity:0` at rest and only became visible on `.card:hover`, so in the default grid/thumbnail view the redact button appeared to be missing from every document; it only showed in list view (which forces `opacity:1`). The button was always rendered in the DOM — this was purely a CSS visibility bug. Given it the same `0.35` baseline opacity as the delete button so it's discoverable at rest and brightens on hover. +- **Card action buttons invisible in grid view** — `.card` was missing `position: relative`, so the `position:absolute` delete (🗑), redact (✏), and bulk-select checkbox elements anchored to the viewport instead of the card and were then clipped away by the card's `overflow:hidden`. They only appeared in list view, where those elements are `position:static` and flow inline. Added `position: relative` to `.card` so all three position correctly within each card. Also gave `.card-redact-btn` the same `0.35` baseline opacity as the delete button (it was `opacity:0` at rest) so it's discoverable without hovering. ### Security diff --git a/static/style.css b/static/style.css index 705467f..a817811 100644 --- a/static/style.css +++ b/static/style.css @@ -234,7 +234,7 @@ .preview-meta { padding: 10px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; } .preview-open-btn { margin-left: auto; background: var(--accent); color: #fff; border: none; border-radius: 5px; padding: 4px 10px; font-size: 11px; cursor: pointer; white-space: nowrap; } .card.selected { outline: 2px solid var(--accent); outline-offset: 2px; } - .card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s; } + .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .card.list-view { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; } .thumb-wrap { aspect-ratio: 7/9; overflow: hidden; background: var(--bg); }