From 3de43f55a63c8a12a89b623df61f447d37cebf1c Mon Sep 17 00:00:00 2001 From: Giorgio Gilestro Date: Wed, 27 May 2026 15:09:34 +0200 Subject: [PATCH] portfolio-edit: fix rogue Edit/Done/Add visibility MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two interlocking bugs surfaced after the design pass: 1. CSS `display: inline-flex` on .pf-edit-btn/.pf-done-btn overrode the UA's `[hidden] { display: none }`, so the JS toggling `editBtn.hidden` had no visual effect — both buttons rendered side by side. 2. portfolio.js's empty-state path sets `form.hidden = false` but the populated-portfolio render path only removed the `pf-empty` class; it never reset `form.hidden = true`. So once a user went through the empty state, the add form stuck around — leaving the Add button visible on a populated dashboard. Fixes are surgical: add an explicit `[hidden]` rule for the two header pills, and re-hide the form in `renderPanel` unless edit mode is currently active (so we don't yank the form out from under an edit-in-progress). Co-Authored-By: Claude Opus 4.7 --- app/static/css/cassandra.css | 3 +++ app/static/js/portfolio.js | 7 +++++++ 2 files changed, 10 insertions(+) diff --git a/app/static/css/cassandra.css b/app/static/css/cassandra.css index 541ae6d..e63c24f 100644 --- a/app/static/css/cassandra.css +++ b/app/static/css/cassandra.css @@ -2331,6 +2331,9 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); } color: var(--accent); border-color: var(--accent); } +/* The JS toggles these via the `hidden` attribute. `display: inline-flex` + * above otherwise wins over the UA's `[hidden] { display: none }`. */ +.pf-edit-btn[hidden], .pf-done-btn[hidden] { display: none; } /* × button per row — hidden by default, visible only in edit mode. */ .pf-row-del-cell { width: 20px; text-align: center; } diff --git a/app/static/js/portfolio.js b/app/static/js/portfolio.js index dfbcbfa..21e4358 100644 --- a/app/static/js/portfolio.js +++ b/app/static/js/portfolio.js @@ -272,6 +272,13 @@ function renderPanel(mount, pie, enriched, agg) { var panel = document.getElementById('portfolio-panel'); if (panel) panel.classList.remove('pf-empty'); + // The empty-state path forces the add form visible. When we move + // back to a populated view we re-hide it — unless edit mode is on, + // in which case the form stays visible for ongoing edits. + var form = document.getElementById('pf-add-form'); + if (form && panel && !panel.classList.contains('pf-editing')) { + form.hidden = true; + } const ccyPills = Object.keys(agg.by_currency) .sort((a, b) => agg.by_currency[b] - agg.by_currency[a])