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 <noreply@anthropic.com>
Giorgio Gilestro
3de43f55a6