Skip to content

fix(map): stop mobile Features panel from blocking sidebar connect button (#3532)#3536

Merged
Yeraze merged 1 commit into
mainfrom
fix/3532-map-controls-mobile-zindex
Jun 18, 2026
Merged

fix(map): stop mobile Features panel from blocking sidebar connect button (#3532)#3536
Yeraze merged 1 commit into
mainfrom
fix/3532-map-controls-mobile-zindex

Conversation

@Yeraze

@Yeraze Yeraze commented Jun 18, 2026

Copy link
Copy Markdown
Owner

Summary

Fixes #3532. On mobile portrait, the map Features panel (.map-controls) painted on top of the slide-in Sources sidebar drawer, covering the source Connect button. Users had to rotate to landscape or zoom out to reach it.

Root cause

A z-index stacking conflict on the max-width: 768px breakpoint:

Element z-index
Map Features panel (.map-controls) 1000
Sidebar drawer (.dashboard-sidebar) 999
Backdrop (.dashboard-sidebar-backdrop) 998

The Features panel's base z-index: 1000 was never overridden on mobile, and its max-width: calc(100vw - 64px) spans nearly the full viewport — so when the drawer slid in, the panel stayed on top and blocked the Connect button.

Fix

Lower .map-controls to z-index: 997 inside the existing mobile media query (src/styles/nodes.css) so it yields to the drawer + backdrop when the sidebar is open.

This is safe for the closed state: the backdrop is opacity: 0; pointer-events: none when the drawer is closed, so the map controls interact exactly as before. The panel only drops behind the overlay while the sidebar is actually open — the desired behavior.

CSS-only, behavior-preserving. No JS/state coupling between the sidebar and map components was needed.

Testing

  • tsc --noEmit: no new errors introduced (CSS-only change).
  • Full Vitest suite: 6784 passed / 0 failed (2298 suites).

🤖 Generated with Claude Code

@Yeraze @claude
fix(map): stop mobile Features panel from blocking sidebar connect bu…
91485fd 
…tton

On mobile portrait the map Features panel (.map-controls, z-index:1000)
painted above the slide-in Sources sidebar drawer (z-index:999) and its
backdrop (z-index:998), covering the source Connect button. Users had to
rotate to landscape or zoom out to reach it.

Lower .map-controls to z-index:997 inside the existing max-width:768px
media query so it yields to the drawer when the sidebar is open. The
drawer's backdrop is opacity:0/pointer-events:none when closed, so the
override has no effect on normal map-controls interaction.

Fixes #3532

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@github-actions

github-actions Bot commented Jun 18, 2026 •
edited
Loading

Copy link
Copy Markdown

Claude finished @Yeraze's task —— View job

PR Review

  • Read changed CSS file
  • Check related z-index usages across codebase
  • Provide review feedback

Overall: LGTM — clean, minimal, well-reasoned fix.

What the change does

src/styles/nodes.css:1289-1299 — inside the existing @media (max-width: 768px) block, .map-controls gets z-index: 997 added. The confirmed z-index stack is:

Element z-index File
.dashboard-sidebar (mobile drawer) 999 dashboard.css:809
.dashboard-sidebar-backdrop 998 dashboard.css:94
.map-controls (this fix) 997 nodes.css:1298
.map-controls base (desktop) 1000 nodes.css:2177

The values are correct and sourced directly from the existing stylesheet — not guessed.

Positive observations

  • Minimal footprint — 5 lines added, 0 deleted, single file. CSS-only with no JS coupling needed.
  • Targeted scope — the override is inside the existing mobile media query so desktop behavior is completely unchanged.
  • Good comment — the inline comment at nodes.css:1294-1297 clearly explains the intent and references the issue number, which will help future maintainers understand why this value is deliberately lower than the base.
  • Safety argument is sound — backdrop uses opacity: 0; pointer-events: none when the drawer is closed (dashboard.css:95-96), so the lowered z-index on map controls has zero effect during normal map interaction.

Minor observations (non-blocking)

  1. nodes-anchored-sidebar on mobile is also z-index: 1000 (nodes.css:1262). That element is the in-map node list sidebar (not the dashboard sources sidebar), so it's a different stacking context — but worth keeping in mind if the map panel sidebar ever overlaps the dashboard drawer in a future layout change.

  2. No new regression test — this is a CSS-only visual fix, so a Vitest unit test can't cover it. A note in the PR about manual verification steps (or a future E2E test for z-index ordering) would be nice, but it's not blocking for a change this small.

  3. The PR description says the Vitest suite passed (6784/0). Since CI also runs on the PR, that's sufficient verification.

Verdict

The root cause analysis is accurate, the fix is correct, and the comment in the code makes the intent clear. No issues found.

@Yeraze Yeraze merged commit 8be6eb1 into main Jun 18, 2026
15 checks passed
@Yeraze Yeraze deleted the fix/3532-map-controls-mobile-zindex branch June 18, 2026 13:18
@Yeraze Yeraze mentioned this pull request Jun 18, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Map features menu blocks sidebar connect button on mobile

1 participant

@Yeraze