Feature 634 - Map Widgets Alignment

[denete]

What does this PR do?

This PR affects all draggable map layers.

• Add a snap grid to assist with item control alignment
• Address the margins used by Leaflet for corner positioning by placing controls in a div.panelWrapper
• Remove the position translation used by the element's hover state for useWSPR.js
• Updated panel structure for several layers and changed to using standard theme variables for styles
• Removed margin and added padding for grab handle in order to allow a larger target area for dragging panels
• Lightning: "nearby strikes" was setting initial position centered, but that used transform which was not changed when draggable, resulting in large jumps after mouseup
• Control styles were all adapted to use color variables

Layers updated...

• WSPR
• VOACAP Heatmap
• RBN
• N3FJP Logged QSOs
• MUF Map
• Lightning
• Gray Line

Type of change

• Bug fix
• New feature
• Performance improvement
• Refactor / code cleanup
• Documentation
• Translation
• Map layer plugin

How to test

1. Activate any map layer that has a panel control
2. Confirm dragging to reposition, with no changes after mouseup or reload
3. Confirm double-clicking header to reset position to default
4. Confirm show / hide of panel contents
5. Confirm theme consistency for all panel elements

Checklist

• App loads without console errors
• Tested in Dark, Light, Legacy, and Retro themes
• Responsive at different screen sizes (desktop + mobile)
• If touching server.js: caches have TTLs and size caps (we serve 2,000+ concurrent users)
• If adding an API route: includes caching and error handling
• If adding a panel: wired into Modern, Classic, and Dockable layouts
• No hardcoded colors — uses CSS variables (var(--accent-cyan), etc.)
• No .bak, .old, console.log debug lines, or test scripts included

Screenshots (if visual change)

BEFORE

AFTER

This PR addresses issue #634 .

[accius]

Hey, nice work on this — the panel-wrapper standardization and CSS variable cleanup is a big improvement, and snap-to-grid is a great addition. Two bugs in makeDraggable.js need fixing before I can merge though:

Bug 1: didDrag tracking removed — click suppression is broken

The mousemove handler lost the didDrag threshold check:

if (!didDrag && (Math.abs(e.clientX - startX) > 2 || Math.abs(e.clientY - startY) > 2)) {
  didDrag = true;
}

Without this, didDrag is never set to true, so suppressClick = didDrag in mouseup is always false. Every drag-release will fire a click event on the handle, which will trigger the minimize toggle on drop. Just add it back above the nextLeft/nextTop calculation.

Bug 2: previousTransition not restored in mouseup

Mousedown sets el.style.transition = 'none' to prevent janky animation during drag, but the mouseup handler no longer restores it with el.style.transition = previousTransition. After the first drag, CSS transitions on the panel are permanently killed. Add it back before updateCursor().

Also two minor nits (non-blocking):

• updateCursor(e) in mouseup passes an event arg to a no-arg function — harmless but looks like an incomplete edit, can just be updateCursor()
• The empty .lightning-proximity {} rule in main.css does nothing, can remove

Everything else looks good — the panel-wrapper DOM pattern, the options object API for makeDraggable, the CSS variable theming, and the proximity panel transform workaround all make sense. Should be a quick fix, let me know when it's updated!

[denete]

@accius Updates have been made to address the issues you identified plus...

Found an issue with the panel header not using the correct cursors due to multiple elements being set as drag handles. Fixed issue between addMinimizeToggle.js and makeDraggable.js conflicts. Moved styles to main.css as appropriate and replaced hard-coded colors. The minimize toggle carat had different visual dimensions (as the Unicode characters are not the same dimensionally), so while I was in there, I moved to applying a rotation translation instead of swapping the characters.

Sorry if that causes more work in reviewing the PR.

[accius]

looks good to merge, thanks!