Skip to content

fix: center project illustration in import mode picker#3020

Merged
codebanditssss merged 1 commit into
mainfrom
ui/center-import-project-illustration
Jul 23, 2026
Merged

fix: center project illustration in import mode picker#3020
codebanditssss merged 1 commit into
mainfrom
ui/center-import-project-illustration

Conversation

@Annieeeee11

Copy link
Copy Markdown
Collaborator

Summary

  • Center the web-app · main chip in the Project import card by giving both cards the same illustration height
  • Replace hardcoded 178px with --size-import-mode-illustration in tokens.css

Test plan

  • Open New Project / Import modal
  • Confirm Workspace and Project cards share the same illustration area height
  • Confirm the Project chip is centered horizontally and vertically above the title
  • Confirm Workspace dashed illustration layout is unchanged

Before

image

After

image

Match the Project card illustration height to Workspace and center the chip; move the shared height into --size-import-mode-illustration.
@Annieeeee11
Annieeeee11 requested a review from JAYATIAHUJA July 23, 2026 14:14
@Annieeeee11 Annieeeee11 self-assigned this Jul 23, 2026

@codebanditssss codebanditssss left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

clean, correct, and well-scoped. both import cards now share one illustration height via the new --size-import-mode-illustration token: the project card goes from h-[120px] to 178px with items-center so the web-app · main chip centers in an area matching the workspace card, and the workspace box stays 178px so its dashed layout is unchanged. checked a few things:

  • the h-(--var) shorthand is the established pattern here, not a new style (Tailwind v4, and ConnectMobileModal uses it 16x, ReportProblemDialog 5x, etc.), so it fits the codebase.
  • complete: both hardcoded 178px occurrences are replaced, no stray value left behind.
  • token sits with the sibling --size-import-mode-card-min* tokens in tokens.css.

only thing i couldn't verify locally is whether the centered-chip result matches the agent-orchestrator reference we clone, but the before/after screenshots look right. approving.

@codebanditssss
codebanditssss merged commit 4525c0c into main Jul 23, 2026
4 checks passed
@Annieeeee11
Annieeeee11 deleted the ui/center-import-project-illustration branch July 23, 2026 19:09
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