a2nr
/
velxio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(minimap): shrink to 140x105 + red viewport rect 

User feedback: the default 200x150 minimap eats too much of the
canvas-content area on a typical 13"/14" laptop, and the white
viewport rectangle against a dark canvas blends with the boards
once enough components are placed.

Drop the desktop default down to the size we already use on phones
(140x105 — the mobile media query still wins on screens ≤720px so
that block continues to apply identically). At this size the rect
becomes the focal indicator of where you are in the world; switch
its outline to brand red (#ef4444 — Tailwind red-500) with a faint
red fill so it pops without overpowering the boards (which stay
brand blue).

Body of the work is two number changes + two color tokens; the
rest of the component logic (pointer routing, world rendering,
clamping) is untouched.
This commit is contained in:
davidmonterocrespo24 2026-05-14 22:32:42 +02:00
parent 28d9cbc490
commit 218a891c6d
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/simulator/CanvasMinimap.css
View File

@ -53,8 +53,8 @@
* based on the calculated rect bounds. */
.canvas-minimap-viewport {
position: absolute;
border: 1.5px solid rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.08);
border: 1.5px solid rgba(239, 68, 68, 0.95);
background: rgba(239, 68, 68, 0.10);
border-radius: 2px;
pointer-events: none;
/* No transition on left/top — those values change every frame during

4
frontend/src/components/simulator/CanvasMinimap.tsx
View File

@ -28,8 +28,8 @@ import type { Component } from '../../types/components';
import type { BoardInstance } from '../../types/board';
import './CanvasMinimap.css';
const MINIMAP_W = 200;
const MINIMAP_H = 150;
const MINIMAP_W = 140;
const MINIMAP_H = 105;
const WORLD_W = 4000;
const WORLD_H = 3000;
const SCALE_X = MINIMAP_W / WORLD_W;