fix(fe): fix aligment of icons in dc region

[jog1t]

No description provided.

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-inspector	Ready	Preview	Comment	Oct 26, 2025 11:15pm

2 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-cloud	Ignored			Oct 26, 2025 11:15pm
rivet-site	Ignored	Preview		Oct 26, 2025 11:15pm

[jog1t]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• fix(e): disable temporarly pla n customer idetification #3272
• fix(fe): fix aligment of icons in dc region #3271 👈 (View in Graphite)
• fix(fe): redirect engine users to connect page when there's no actors #3269 : 1 other dependent PR (#3270 )
• fix(fe): empty token it is a valid token #3268
• main

---

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[claude]

PR Review: Fix alignment of icons in datacenter region

Summary

This PR fixes a visual alignment issue in the runner config table by changing the flexbox alignment from items-start to items-center for single-region displays.

✅ Code Quality

Positive aspects:

• The fix is minimal and targeted, changing only what's necessary
• The change aligns with the component's design - the ActorRegion component uses items="center" internally (line 34 in actor-region.tsx), so this ensures consistent alignment
• The fix is located in the correct place (single region display path)

🔍 Analysis

What the change does:

• When a runner config has exactly one region, the ActorRegion component is displayed
• Previously: items-start caused the icon and label to align to the top of the container
• Now: items-center centers the content vertically, matching the table's text-center styling on the parent cell (line 157)

Consistency check:

• The parent TableCell uses className="text-center" (line 157), so centering items vertically makes sense
• The multi-region case (lines 269-278) already uses centered content via the tooltip trigger
• This change brings visual consistency between single and multi-region displays

📝 Minor Observations

1. Typo in PR title: "aligment" should be "alignment"

2. No tests: There don't appear to be visual regression tests for this component. While not blocking for this UI fix, consider adding visual tests in the future to catch alignment issues.

3. Parent cell styling: The parent cell at line 157 has text-center which handles horizontal centering. The fix now ensures vertical centering matches, which is correct.

✅ Recommendation

LGTM! This is a solid fix for a visual alignment issue. The change:

• ✅ Follows the existing component design patterns
• ✅ Maintains consistency with the multi-region display
• ✅ Is minimal and focused
• ✅ Has no security or performance implications
• ✅ Aligns with the parent cell's centered styling

Suggested improvement for future: Consider adding a visual regression test suite for UI components to catch alignment issues automatically.

---

🤖 Generated with Claude Code

[graphite-app]

Graphite Automations

"Test" took an action on this PR • (10/26/25)

1 assignee was added to this PR based on Kacper Wojciechowski's automation.

[pkg-pr-new]

More templates

• example-ai-agent
• example-background-jobs
• example-better-auth-external-db
• example-bots
• chat-room
• example-cloudflare-workers
• example-cloudflare-workers-hono
• example-counter
• example-counter-serverless
• example-crdt
• example-cursors
• example-cursors-raw-websocket
• example-database
• example-deno
• example-sqlite
• example-elysia
• example-express
• example-freestyle
• example-game
• example-hono
• example-hono-bun
• example-hono-react
• example-kitchen-sink
• example-next-js
• example-rate
• example-raw-fetch-handler
• example-raw-websocket-handler
• example-raw-websocket-handler-proxy
• example-react
• example-smoke-test
• starter
• example-stream
• example-sync
• example-tenant
• example-trpc
• example-workflows

@rivetkit/actor

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/actor@3271

@rivetkit/cloudflare-workers

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/cloudflare-workers@3271

@rivetkit/core

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/core@3271

@rivetkit/db

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/db@3271

@rivetkit/framework-base

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/framework-base@3271

@rivetkit/next-js

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/next-js@3271

@rivetkit/react

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/react@3271

rivetkit

pnpm add https://pkg.pr.new/rivet-dev/rivet/rivetkit@3271

@rivetkit/sql-loader

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sql-loader@3271

@rivetkit/engine-runner

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner@3271

@rivetkit/engine-runner-protocol

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner-protocol@3271

commit: 7b85e98