Skip to content

fix(frontend): improve editor typography, heading hierarchy, sidebar sizing, and fix markdown scroll bug#3837

Draft
mmabrouk wants to merge 1 commit intomainfrom
fix/ui-improvements-editor-sidebar-v3
Draft

fix(frontend): improve editor typography, heading hierarchy, sidebar sizing, and fix markdown scroll bug#3837
mmabrouk wants to merge 1 commit intomainfrom
fix/ui-improvements-editor-sidebar-v3

Conversation

@mmabrouk
Copy link
Member

@mmabrouk mmabrouk commented Feb 25, 2026

Summary

Addresses UI/UX feedback from a user regarding editor readability, heading hierarchy, sidebar sizing, and a markdown editor scroll bug.

Replaces #3835 / #3818 (which were merged/reverted accidentally)

Changes

Editor Heading Styles (H1-H6)

  • H1: increased to 28px bold (700) with bottom border — was 18px weight 400
  • H2: increased to 24px semibold (600), removed text-transform: uppercase and gray color, added bottom border — was 15px uppercase gray
  • H3-H6: added proper descending size hierarchy (20px → 14px) with semibold weight — previously undefined/missing

Monospace Font Stack

  • Upgraded from Menlo, Consolas, Monaco, monospace to "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, Monaco, monospace across all editor code blocks and inline code

Code Block Styling

  • Improved background color to subtle gray with rounded corners and soft border
  • Added better margin/spacing around code blocks
  • Markdown view code blocks get slightly larger font (14px)

Inline Code Styling

  • Better padding, border-radius, and background color for inline code spans

Markdown Editor Scroll Bug Fix

  • Fixed the bug where pressing Enter in markdown editing mode caused the editor to scroll to the bottom
  • Root cause: selection.insertRawText("\n") triggered browser auto-scroll to caret; the command handler also unconditionally returned true even for non-markdown nodes
  • Fix: save/restore scroll position around the insertion, use {discrete: true} for the editor update, and only return true when actually handling a markdown node

Playground Variant Selector

  • Widened default dropdown from 120px to 200px so prompt names are no longer truncated

Sidebar Menu

  • Increased menu item height from 28px to 32px
  • Increased icon size from 12px to 14px
  • Increased font size from 12px to 13px

Open with Devin

…sizing, and fix markdown scroll bug

- Standardize H1-H6 heading styles with proper size hierarchy and font weights
- Add bottom borders to H1/H2 headings for visual separation
- Upgrade monospace font stack to include SF Mono, JetBrains Mono, Roboto Mono
- Improve code block styling with better background, border-radius, and spacing
- Fix markdown editor scroll-to-bottom on Enter by preserving/restoring scroll position
- Fix Enter key handler to only claim handled when actually in markdown mode
- Widen playground variant selector dropdown from 120px to 200px
- Increase sidebar menu item height (28→32), icon size (12→14), font size (12→13)
@vercel
Copy link

vercel bot commented Feb 25, 2026

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

Project Deployment Actions Updated (UTC)
agenta-documentation Building Building Preview, Comment Feb 25, 2026 1:52pm

Request Review

@dosubot dosubot bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Feb 25, 2026
@dosubot dosubot bot added bug Something isn't working UI UX labels Feb 25, 2026
Copy link
Contributor

@devin-ai-integration devin-ai-integration bot left a comment

Choose a reason for hiding this comment

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

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 4 additional findings.

Open in Devin Review

@github-actions
Copy link
Contributor

github-actions bot commented Feb 25, 2026

Railway Preview Environment

Status Destroyed (PR converted to draft)

Updated at 2026-02-27T10:37:24.310Z

@mmabrouk mmabrouk marked this pull request as draft February 27, 2026 10:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working size:L This PR changes 100-499 lines, ignoring generated files. UI UX

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant