Skip to content

fix(editor): move page icon above title for proper alignment#189

Merged
zacharias-ona merged 1 commit into
mainfrom
fix/emoji-picker-title-alignment
Apr 17, 2026
Merged

fix(editor): move page icon above title for proper alignment#189
zacharias-ona merged 1 commit into
mainfrom
fix/emoji-picker-title-alignment

Conversation

@zacharias-ona
Copy link
Copy Markdown
Collaborator

The emoji picker was rendered inline with the title, pushing it out of alignment with the editor content below.

Changes:

  • Move the page icon to render as a block element above the title row instead of inline beside it
  • When an icon is set: display it at a larger size (text-4xl) above the title, clickable to change/remove
  • When no icon is set: show a small "Add icon" button (icon + label) that appears on hover

Files changed:

  • src/components/page-view-client.tsx — restructured layout so PageIcon sits above the title+menu row
  • src/components/page-icon.tsx — two render paths for icon-present vs no-icon states

The emoji picker was rendered inline with the title, causing
misalignment between the title and editor content. Now the icon
renders as a block element above the title row. When no icon is set,
a small 'Add icon' button appears on hover.

Co-authored-by: Ona <no-reply@ona.com>
@zacharias-ona zacharias-ona added the ona-user PR created via interactive Ona session — no issue reference required label Apr 17, 2026
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 17, 2026

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

Project Deployment Actions Updated (UTC)
memo Ready Ready Preview, Comment Apr 17, 2026 4:47pm

Request Review

@zacharias-ona zacharias-ona merged commit 359c32b into main Apr 17, 2026
6 checks passed
@zacharias-ona zacharias-ona deleted the fix/emoji-picker-title-alignment branch April 17, 2026 16:48
@zacharias-ona
Copy link
Copy Markdown
Collaborator Author

⚠️ UI verification found a design spec violation. See #191.

Summary: transition-opacity on the "Add icon" hover-reveal in page-icon.tsx violates the design spec rule "Hover states: no transition (instant)." All other checks (color tokens, typography, spacing, corners, accessibility, dark mode, mobile layout, visual alignment) passed.

@zacharias-ona
Copy link
Copy Markdown
Collaborator Author

❌ Post-merge verification failed.

E2E results: 46/47 passed, 1 failed

  • user can remove a page icon — page returns 404 after removing an icon via the emoji picker

Ad-hoc smoke tests: all passed

  • ✅ Landing page (200, has title)
  • ✅ Sign-in page (email input present)
  • ✅ Health endpoint (200, status ok)
  • ✅ Authenticated login + workspace load
  • ⏭️ Editor route (skipped — no page buttons in smoke workspace)
  • ⏭️ Dashboard (not yet built)

See #193.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ona-user PR created via interactive Ona session — no issue reference required

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant