Skip to content

Add a development alignment grid toggled with Ctrl+G - #5

Merged
davidvanleeuwen merged 1 commit into
mainfrom
feat/dev-alignment-grid
Oct 14, 2026
Merged

davidvanleeuwen merged 1 commit into
mainfrom
feat/dev-alignment-grid

Conversation

@bluebird42

@bluebird42 bluebird42 commented Oct 12, 2026 •

Copy link
Copy Markdown
Contributor

Checking alignment while polishing the dashboard meant eyeballing spacing or reaching for browser extensions. This adds a grid overlay to both root layouts: fine lines every 8px and stronger lines every 32px, matching the spacing scale. Ctrl+G toggles it, and the choice is remembered in localStorage across page loads and LiveView navigation.

The overlay only renders when dev routes are enabled (config :mave_core, dev_routes: true). The component is chosen at compile time, so production builds render nothing and the keyboard handler finds no element to toggle.

Grid on the data page (Ctrl+G):

Dashboard with the alignment grid overlay

Validation:

  • mix compile --warnings-as-errors and mix format --check-formatted passed.
  • Toggled the grid on and off in the development stack, including after reloads.

No migration or configuration change is needed.

Render an 8px/32px grid overlay in both root layouts when dev routes are
enabled. Ctrl+G toggles it and the choice persists across page loads.
Production builds render nothing.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@davidvanleeuwen
davidvanleeuwen merged commit b55eae7 into main Oct 14, 2026
3 checks passed
@davidvanleeuwen
davidvanleeuwen deleted the feat/dev-alignment-grid branch October 14, 2026 08:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants