Skip to content

Keep profile avatar cutouts transparent and align the header gutter - #319

Merged
klopez4212 merged 4 commits into
mainfrom
kennylopez-avatar-gap-transparency
Sep 28, 2026
Merged

klopez4212 merged 4 commits into
mainfrom
kennylopez-avatar-gap-transparency

Conversation

@klopez4212

@klopez4212 klopez4212 commented Sep 27, 2026 •

Copy link
Copy Markdown
Contributor

The top-right profile button painted glass and pressed-state fills beneath its avatar cutout. Keep that gap transparent at rest, hover, press, and while the menu is open, preserving the 40px avatar, badge colors, and keyboard-only focus ring. Align the header's right gutter with the card below at 640–700px, where rendered measurements showed an 8px mismatch; desktop and narrower spacing remain unchanged.

Snapshots

Approved pointer-state appearance, captured from the production app with fixture data in WebKit. The keyboard-focus ring is intentionally absent from these default previews.

Light Dark
Light: clear avatar gap with no pointer ring Dark: clear avatar gap with no pointer ring

Validation

  • Chromium and WebKit: cutout pixels match the actual backdrop in both themes across rest/hover/press/open states; pointer states have no ring, keyboard focus retains its 2px ring, and Enter/Escape menu behavior works. Avatar/card right edges match at 390, 639, 640, 650, 700, 701, and 1280px.
  • One browser case added, none removed. Real paint, CSS layering, focus rendering, and responsive geometry require a browser. The pre-fix cutout comparison failed in all four light-mode pointer states; the corrected case passes in both engines. No coverage moved or removed.
  • Pre-commit and pre-push hooks passed: TypeScript, 105 related test files / 1,269 tests, design types and guards. Focused profile tests: 13/13. Independent agent review: no blockers; minimalness/elegance/correctness 9/10.
  • Human visually approved the corrected snapshots and explicitly requested ready-for-review status. Native app validation remains deferred; browser evidence does not establish native acceptance. At the ready-for-review transition, DCO passed but hosted JavaScript and three browser shards failed; see the current Checks tab for their status.

Signed-off-by: klopez4212 <klopez4212@gmail.com>
Signed-off-by: klopez4212 <klopez4212@gmail.com>
@klopez4212
klopez4212 marked this pull request as ready for review September 27, 2026 16:04
@klopez4212
klopez4212 requested review from a team, comp615 and wesbillman as code owners September 27, 2026 16:04
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Sep 27, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-09-27T18:07:13.288900Z ce4abd5 New commits
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 919927b735

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/shared/design-system/ui/IconButton.tsx

@wesbillman wesbillman 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.

Star Lord automated source review

Published via Wes's account; non-blocking COMMENT, not approval or merge authorization.

Reviewed head 919927b735f5e6389ed147c07c48e7de5129bb19 against base f5c49be04b0f4cdabc926580caf73e6035ea39d8, using hash-verified source with no dirty inputs.

One actionable finding, attached inline: reconcile the retained browser regression with the intentionally changed avatar appearance. I found no additional actionable defect in the reviewed variant/CSS cascade, avatar mask and keyboard-focus ownership, or responsive right-gutter change.

Validation limits: source inspection only; no local tests, app launches, or PR-code execution. Read-only hosted evidence from run 36330875803 is bound to this head: the new profile-avatar-gap.spec.mjs case passes in Chromium and WebKit, but the run remains failed. Besides the inline finding, JavaScript reports a dev/vite-config.test.mjs subprocess timeout and WebKit 2/3 reports a navigation-fixture console/access-control error; neither is attributed to this patch by this review. Windows native validation is skipped, and native acceptance remains unverified.

Comment thread src/app/shell/ProfileButton.tsx
Signed-off-by: klopez4212 <klopez4212@gmail.com>
Signed-off-by: Codex <codex@openai.com>
@klopez4212
klopez4212 merged commit a2927b4 into main Sep 28, 2026
15 of 25 checks passed
@klopez4212
klopez4212 deleted the kennylopez-avatar-gap-transparency branch September 28, 2026 16:18
zrmarley added a commit that referenced this pull request Sep 28, 2026
…ad-on-send

* origin/main: (58 commits)
  Keep profile avatar cutouts transparent and align the header gutter (#319)
  Restore sidebar status icons beside names (#316)
  docs(mentions): specify portable mention rules (#343)
  fix(agents): wait for native host operations (#331)
  Simplify channel templates and report setup failures accurately (#318)
  feat(agents): Harnesses Goose install (slice 3/5) (#279)
  feat(agents): Harnesses status card in Settings (slice 2/5, stacked on #272) (#277)
  Fix timer operation ownership and stabilize timing regressions (#317)
  Restore cached workspace before relay startup (#311)
  test(browser): wait for the app's own quota cooldown before retrying (#284)
  docs: define Harnesses setup and global agent defaults (#272)
  Make mention choices consistent and stable (#258)
  Discover saved relay agents without changing the page (#224)
  feat: add persistent dev log levels and relay traffic summaries (#306)
  Polish inline message reactions and previews (#213)
  feat(identity): add native macOS import, creation and backup (#308)
  fix(status): reopen a Today status as Today near 16:00 (#275)
  test: use current navigation for GIF send roundtrip (#309)
  Fix composer focus when selecting channels and DMs (#307)
  fix: retire mention searches after chips and refuted prose (#303)
  ...

# Conflicts:
#	src/features/messages/MessageComposer.test.tsx
#	src/features/messages/MessageComposer.tsx
johnmatthewtennant pushed a commit that referenced this pull request Sep 28, 2026
* origin/main: (45 commits)
  Use Blue 11 links with Blue 3 hover and explicit contrast exceptions (#322)
  perf(messages): index the emoji catalog for reaction lookups (#333)
  Polish search palette and add conversation search (#340)
  Use step-ten avatar colors with contrasting outlines (#320)
  Keep profile avatar cutouts transparent and align the header gutter (#319)
  Restore sidebar status icons beside names (#316)
  docs(mentions): specify portable mention rules (#343)
  fix(agents): wait for native host operations (#331)
  Simplify channel templates and report setup failures accurately (#318)
  feat(agents): Harnesses Goose install (slice 3/5) (#279)
  feat(agents): Harnesses status card in Settings (slice 2/5, stacked on #272) (#277)
  Fix timer operation ownership and stabilize timing regressions (#317)
  Restore cached workspace before relay startup (#311)
  test(browser): wait for the app's own quota cooldown before retrying (#284)
  docs: define Harnesses setup and global agent defaults (#272)
  Make mention choices consistent and stable (#258)
  Discover saved relay agents without changing the page (#224)
  feat: add persistent dev log levels and relay traffic summaries (#306)
  Polish inline message reactions and previews (#213)
  feat(identity): add native macOS import, creation and backup (#308)
  ...

Signed-off-by: Sol <49aa1f65411fd096d2e2ec144f1e7aa36fdc76d1b907cfdf7be000c66f9d3b8e@buzz.block.builderlab.xyz>

# Conflicts:
#	src/bundled/agents/AgentCard.tsx
#	src/bundled/agents/AgentsPage.tsx
johnmatthewtennant pushed a commit that referenced this pull request Sep 28, 2026
* origin/main: (36 commits)
  Delay message timestamp tooltips by 500 ms (#321)
  Use Blue 11 links with Blue 3 hover and explicit contrast exceptions (#322)
  perf(messages): index the emoji catalog for reaction lookups (#333)
  Polish search palette and add conversation search (#340)
  Use step-ten avatar colors with contrasting outlines (#320)
  Keep profile avatar cutouts transparent and align the header gutter (#319)
  Restore sidebar status icons beside names (#316)
  docs(mentions): specify portable mention rules (#343)
  fix(agents): wait for native host operations (#331)
  Simplify channel templates and report setup failures accurately (#318)
  feat(agents): Harnesses Goose install (slice 3/5) (#279)
  feat(agents): Harnesses status card in Settings (slice 2/5, stacked on #272) (#277)
  Fix timer operation ownership and stabilize timing regressions (#317)
  Restore cached workspace before relay startup (#311)
  test(browser): wait for the app's own quota cooldown before retrying (#284)
  docs: define Harnesses setup and global agent defaults (#272)
  Make mention choices consistent and stable (#258)
  Discover saved relay agents without changing the page (#224)
  feat: add persistent dev log levels and relay traffic summaries (#306)
  Polish inline message reactions and previews (#213)
  ...

Signed-off-by: Sol <49aa1f65411fd096d2e2ec144f1e7aa36fdc76d1b907cfdf7be000c66f9d3b8e@buzz.block.builderlab.xyz>

# Conflicts:
#	src/bundled/agents/AgentEditor.tsx
#	src/bundled/profiles/ProfileAgentIdentity.test.tsx
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.

3 participants