mirror of
https://github.com/Kpa-clawbot/meshcore-analyzer.git
synced 2026-09-25 13:53:43 +00:00
Eldoon Nemar
99cea7bf72
### Description This PR addresses several visual and UX issues on the Live page, specifically focusing on mobile viewport constraints and filter accessibility. **Changes:** 1. **Dropdown Clipping Fix**: Previously, the Node, Region, and Area filters were nested inside `.live-toggles`. On narrow screens, `.live-toggles` becomes a horizontally scrolling container (`overflow-x: auto`), which unintentionally clipped the absolute-positioned dropdown menus for these filters. They have been moved to `.live-controls-body` as siblings, allowing their dropdowns to correctly break out and overlay the map. 2. **Cog Positioning**: The settings cog (`#liveControlsToggle`) has been pushed to the far right of the metrics header using `margin-left: auto`, creating a cleaner visual separation. 3. **Filter Spacing**: When the controls panel is expanded, a `12px` top margin is now applied to push the filter buttons further away from the metrics row for better touch targets and readability. 4. **Test Updates**: The E2E Playwright test for the Area dropdown was updated to click the cog menu first, matching the new DOM structure. 5. **Area outside cog**: Resolves the initial issue of the area dropdown being outside of the cog on a mobile display ### Performance Justification This is a pure HTML/CSS structural refactor. There are no additional per-item calculations or API calls introduced. Moving the DOM nodes out of the scrolling container has zero impact on render loop complexity, and no new JavaScript event listeners were added to the hot path. ### Testing - [x] Unit tests pass (`npm test`) - [x] Playwright E2E tests pass (updated to reflect the cog interaction) - [x] Verified visually in browser (Desktop and Mobile viewports)
