Skip to content

fix(brand): size large CodeNomad logos by their title - #1108

Merged
pascalandr merged 2 commits into
devfrom
fix/logo-max-size
Oct 23, 2026
Merged

pascalandr merged 2 commits into
devfrom
fix/logo-max-size

Conversation

@pascalandr

@pascalandr pascalandr commented Oct 22, 2026 •

Copy link
Copy Markdown
Contributor

Summary

Large logos follow their title instead of the window, on the plain empty state's ratio (6rem logo above a text-3xl title, 3.2x):

  • Home page and branded empty session: 6rem (the home page's 12rem rule from 640 x 721 px goes; the session drops h-48).
  • Narrow session column: the title shrinks to 1.5rem, so the logo shows 4.8rem.
  • Loading screen: 8rem (128 px) beside its larger 2.8rem title, instead of 180 px.
  • dev-docs/UI_CONVENTIONS.md records the rule.

Validation

  • Real home page, branded and plain empty states, narrow session column and loading screen in dark and light at 1100 x 760: logo/title 96/30, 96/30, 96/30, 76.8/24 and 128/44.8 px.
  • Tried in the owner's installed app through a temporary override.
  • npm run typecheck --workspace @codenomad/ui.

With the bare CN mark, the large logos grew with the window and looked
oversized: the home page switched from 8rem to 12rem from 640 x 721 px,
the branded empty session showed 12rem (9rem in narrow columns) and the
loading screen 180 px. The owner wants them no larger than the home
page's compact size.

The home page logo stays 8rem at every window size (the 12rem media rule
and the redundant 8rem override go; the compact hero margin stays), the
branded empty session uses 8rem (h-32) with no narrow-column override,
and the loading screen shows the logo 8rem (128 px) wide. The plain
empty state already uses 6rem.

Validated live in the owner's installed app with an 8rem override on the
home page and empty session, and with the UI typecheck.
@pascalandr

Copy link
Copy Markdown
Contributor Author

Review: zero findings

Reviewed commit d71e3c667 against bbda09754. No evidenced P0–P3 problems or required fixes.

  • Inspected the real components at seven home-page viewport sizes (390–2560 px wide, including the 640 px / 721 px breakpoints), four session-column widths (280–1100 px), and four loading-screen viewport sizes. Logos rendered at 128 × 128 px; hero spacing, narrow-column fit and loading-screen separation remained intact. The loading image's width="128" height="128" attributes match the CSS and square PNG.
  • Found no tests, developer documentation or help pages relying on the removed logo sizes. The commit message accurately describes the change and follows the repository's commit format. No affected help-page content needs updating.
  • UI typecheck passed: npm run typecheck from packages/ui.
  • Browser tests passed: 23/23, using node --import tsx --test --test-concurrency=1 tests/browser/session-interrupt.test.ts tests/browser/new-instance-launcher.test.ts tests/browser/session-aside.test.ts from packages/ui.
  • git diff --check bbda09754...HEAD passed. This review made no repository changes.

The owner set the reference on the plain empty state: a 6rem logo above
its text-3xl title. Large logos now follow their title instead of a
fixed 8rem: the home page and the branded empty session use 6rem beside
the same text-3xl title, and the narrow session column, whose title
shrinks to 1.5rem, shows the logo at 4.8rem, the same 3.2 ratio. The
loading screen keeps 8rem beside its larger 2.8rem title.

dev-docs/UI_CONVENTIONS.md records the rule so a logo changes with its
title and never with the window.

Validated by rendering the real home page, branded and plain empty
states, the narrow session column and the loading screen in dark and
light themes at 1100 x 760: logo/title 96/30 px, 96/30 px, 96/30 px,
76.8/24 px and 128/44.8 px. The owner's installed app shows the same
sizes through a temporary override; the UI typecheck passes.
@pascalandr pascalandr changed the title fix(brand): keep large CodeNomad logos at one 8rem size fix(brand): size large CodeNomad logos by their title Oct 23, 2026
@pascalandr

Copy link
Copy Markdown
Contributor Author

Round 2 — 8790d7a43

zero findings (P0–P3).

  • Checked home hero spacing, normal/narrow branded empty states, the plain empty state and loading screen using the real components and full stylesheet. All 40 layout checks passed across 390×760, 1100×600, 1100×760 and 1600×1000 in light/dark mode.
  • Verified the real session shell at 600, 1100 and 1600px viewport widths: narrow columns compute the logo height to 76.7969px beside a 24px title; the medium column computes 96px beside 30px. The narrow selector's specificity (0,3,0) beats h-24 (0,1,0) despite the utility appearing later. Home/plain/normal logos are 96px; loading is 128px beside 44.8px, matching the owner's chosen sizes.
  • Searched packages/ui/src for other logo/title placements and sizing rules. All large placements are covered; the native titlebar uses its separate small mark. The commit message, PR body and dev-docs/UI_CONVENTIONS.md:14 match the code. The new documentation describes current behavior and satisfies the repository's no-history rule.

Validation: npm run typecheck --workspace @codenomad/ui passed. node --import tsx --test --test-concurrency=1 tests/browser/session-interrupt.test.ts tests/browser/new-instance-launcher.test.ts tests/browser/session-rendering.test.ts passed 59/59, with no failures or skips. Review-only: no repository files changed or pushed.

@pascalandr
pascalandr merged commit 3ef6b0c into dev Oct 23, 2026
15 checks passed
@pascalandr
pascalandr deleted the fix/logo-max-size branch October 23, 2026 00:17
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