Skip to content

Fix toolbar group-label alignment - #2

Merged
cankilic-gh merged 1 commit into
mainfrom
fix/toolbar-group-label-alignment
Aug 4, 2026
Merged

Fix toolbar group-label alignment#2
cankilic-gh merged 1 commit into
mainfrom
fix/toolbar-group-label-alignment

Conversation

@cankilic-gh

Copy link
Copy Markdown
Owner

Summary

  • Replace the detached, hardcoded-offset label row with a structural flex-col column approach
  • Each ToolbarGroup, ToolbarSeparator, logo, and spacer now renders a h-12 icon row and h-5 label row as a single flex-col, so every label is inherently centered under its own buttons at any viewport width
  • No pixel offsets for individual labels; alignment is guaranteed by DOM parentage

Verification

  • DOM measurements at 1280px: File Management, Edit, Tools, View center delta = 0px each
  • TypeScript: no errors
  • Vitest: 51/55 passed (4 pre-existing skips)
  • Production build: ✅

Files changed

  • src/components/Toolbar.tsx (+37/-25)

🤖 Generated with Claude Code

Replace the detached label row (hardcoded px offsets) with a two-row
column structure: each ToolbarGroup, ToolbarSeparator, logo, and spacer
now renders a h-12 icon row and a h-5 label row as a single flex-col,
so every label is inherently centered under its own buttons at any width.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel

vercel Bot commented Aug 4, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
formforge Building Building Preview Aug 4, 2026 7:53pm

@cankilic-gh
cankilic-gh merged commit e4f0268 into main Aug 4, 2026
3 checks passed
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.

1 participant