style(minimap): rework header/canvas layout and sizing

[Nynxz]

Summary

Rework the minimap into a header bar above a rounded, clipped canvas, and fix the viewport cone alignment, the card width, and the panel spacing so the minimap + controls cluster reads as one consistent unit.

Changes

• What:
  • Split the settings/close controls into a flex header bar above a rounded, clipped canvas container (replaces the absolutely-positioned buttons and <hr> divider).
  • Viewport cone alignment: the canvas bitmap was rendered at a fixed resolution but CSS-stretched to fill the wider container, while the cone overlay was positioned in the unstretched coordinate space — so the cone drifted left of the graph and left a ~2px gap at the right edge. Set the canvas resolution to the card's inner width (card width − 2px border = 252) so it renders 1:1; the cone now tracks content and reaches the edge.
  • Width match with the canvas controls: the minimap card (253px) and the canvas controls toolbar (254px) are both right-anchored, so the 1px difference left their left edges misaligned. Card is now 254px so the edges line up.
  • Consistent spacing: the filters panel sat 8px from the minimap while the minimap sat 4px from the controls bar. Tighten the panel gap (mr-2 → mr-1) so both gaps in the cluster are 4px.
  • Clamp the viewport cone to the canvas bounds with a minimum visible span so it can't collapse or drift off-screen at extreme zoom/pan.
• Breaking: none

Review Focus

• Sizing invariant: canvas resolution must equal the card's inner width (card − 2px border). Height already follows this (200 − 2 border − 32 header − 1 divider = 165). Change the card width and the canvas resolution must change with it, or the cone stretch returns.
• containerRef moved from the old all-in-one container to the inner canvas container so click/scroll mapping (clientX - rect.left) stays aligned with the canvas now that the header is a separate bar.

Screenshots & Video

Before	After

Before

Kooha-2026-06-17-00-21-02.mp4

After

Kooha-2026-06-17-00-23-07.mp4

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 33677a95-8c7c-4d0a-ba3d-c3ee5bc7e834

📥 Commits

Reviewing files that changed from the base of the PR and between 0df2b05 and 3298e61.

📒 Files selected for processing (7)

• src/renderer/extensions/minimap/MiniMap.vue
• src/renderer/extensions/minimap/MiniMapPanel.vue
• src/renderer/extensions/minimap/composables/useMinimap.test.ts
• src/renderer/extensions/minimap/composables/useMinimap.ts
• src/renderer/extensions/minimap/composables/useMinimapSettings.test.ts
• src/renderer/extensions/minimap/composables/useMinimapSettings.ts
• src/renderer/extensions/minimap/composables/useMinimapViewport.ts

---

📝 Walkthrough

Walkthrough

The minimap is refactored with a flex-column container layout replacing the absolute-positioned button overlay, internal viewport dimensions changed from 250×200 to 252×165, container width incremented by 1px, GPU compositing hints removed from viewportStyles, a new clampViewportSpan helper added to enforce minimum visible viewport span, and panel spacing reduced by one Tailwind step.

Changes

Minimap Layout, Dimension, and Viewport Clamping Refinements

Layer / File(s)	Summary
Viewport span clamping logic src/renderer/extensions/minimap/composables/useMinimapViewport.ts	Adds VIEWPORT_MIN_VISIBLE constant and clampViewportSpan(start, size, max) helper. updateViewport now computes raw x/y/w/h from world coordinates, then clamps both axes through the helper before writing viewportTransform.
Dimension constants and viewportStyles cleanup src/renderer/extensions/minimap/composables/useMinimap.ts, useMinimapSettings.ts, useMinimap.test.ts, useMinimapSettings.test.ts	useMinimap.ts changes internal width/height from 250×200 to 252×165 and removes willChange, backfaceVisibility, and perspective from viewportStyles. useMinimapSettings.ts increments container width from 253 to 254px. All affected test assertions are updated.
MiniMap template restructure and panel spacing src/renderer/extensions/minimap/MiniMap.vue, MiniMapPanel.vue	MiniMap.vue replaces the absolute-positioned button overlay and <hr> divider with a flex-column layout: a header row contains settings/close buttons, and a rounded overflow-hidden div applies containerStyles width/height around canvas, viewport, and interaction overlay. The scoped overflow: hidden CSS rule is removed. MiniMapPanel.vue reduces spacing from mb-2/mr-2 to mb-1/mr-1.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐇 Hopped through the minimap, snipped a style or two,
Clamped the viewport tight so it never slips from view,
Swapped the buttons' layout, gave the flex its due,
One pixel wider now, the container feels brand new,
Less margin, cleaner padding — even spacing grew!
The little map is tidy, and the rabbit approves. 🗺️

🚥 Pre-merge checks | ✅ 6 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (6 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the main change: a rework of the minimap's header and canvas layout and sizing, which aligns with the comprehensive refactoring across all affected files.
Description check	✅ Passed	The description is comprehensive and follows the template structure with Summary, Changes (What and Breaking), and Review Focus sections. It includes detailed technical explanations and visual evidence through screenshots and video.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
End-To-End Regression Coverage For Fixes	✅ Passed	PR description includes bug-fix language ("fix the viewport cone alignment"), but the PR DOES change browser_tests files (minimap.spec.ts), satisfying the E2E regression test requirement.
Adr Compliance For Entity/Litegraph Changes	✅ Passed	The ADR compliance check does not apply. All changed files are in src/renderer/extensions/minimap/, not in src/lib/litegraph/, src/ecs/, or graph entity files that trigger this check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎨 Storybook: Building...

[github-actions]

🎭 Playwright: ⏳ Running...