feat: two-step X to hide the measure detail panel, reopening on measure click

[Copilot]

The detail panel only exposed an "X" when a measure was selected, with no way to dismiss the empty "Select a measure" card. This adds a single, reused control that deselects a measure on first click and hides the whole panel on the next, reopening automatically when any measure is clicked. When the panel is hidden, the left view (6 categories) expands to full width.

Changes

• App.jsx — New showMeasureCard state (default true) gates rendering of MeasureDetailPanel, and toggles an app__body--full modifier so the left view expands when the panel is hidden. Two handlers wire the behavior:
  • handleSelect reopens the panel on any measure selection.
  • handleCloseOrHide implements the two-step X: deselect if a measure is selected, else hide the panel.
• MeasureDetailPanel.jsx — The empty state now renders the same detail__close control (floating, top-right) with an accessible name; the existing selected-state X is reused, so no duplicate button.
• i18n/strings.js — New hideMeasures key (nl/en/fr), "Hide panel".
• styles/index.css — Positions the floating X on the empty card, adds the app__body--full single-column layout, and top-aligns the empty panel so it no longer shifts when a measure is opened.
• App.test.jsx — Covers select → X (deselect) → X (hide, body expands to full width) → measure click (reopen).

const handleCloseOrHide = () => {
  if (selected) {
    setSelectedCode(null); // first X: deselect
  } else {
    setShowMeasureCard(false); // second X: hide panel
  }
};

[github-actions]

🔍 Preview deployed: https://9bc975fb.grip-visualizer.pages.dev

Updated: Mon, 22 Jun 2026 20:23:15 GMT

[DevSecNinja]

@copilot The panel now hides which is great, but it should in that case also expand the view on the left side with the 6 categories.

[Copilot]

@copilot The panel now hides which is great, but it should in that case also expand the view on the left side with the 6 categories.

Done — when the panel is hidden the body now collapses to a single column (app__body--full) so the 6-category view expands to full width. I also top-aligned the empty "Select a measure" panel so it no longer shifts when a measure is opened.

[DevSecNinja]

@copilot Looks great, it's still jumping though:

[Copilot]

@copilot Looks great, it's still jumping though:

...

Fixed in fd... — the empty card used position: relative, which overrode the sticky positioning and (with the inherited top: 16px) pushed it 16px below the selected panel, so the panel and X jumped on open/close. Removed that override (sticky already anchors the floating X) and aligned the floating X to 18px. The panel top and close button now stay put across the empty ↔ selected transition.