Activity

1. PatBQc

   added

   bugSomething isn't workingSomething isn't working

   on Mar 4, 2026
2. github-actions

   assigned

   iamdavidhill

   on Mar 4, 2026
3. github-actions

   added

   webRelates to opencode on web / desktopRelates to opencode on web / desktop

   windows

   on Mar 4, 2026
4. github-actions commented on Mar 4, 2026

   

   github-actionsBot

   on Mar 4, 2026 – with GitHub Actions

   Contributor

   More actions

   This issue might be a duplicate of existing issues. Please check:

   • Markdown rendering: H1-H6 headings have no visual hierarchy, tables render poorly #15141: Same symptom — H1–H6 headings render with no visual hierarchy (all appear as bold with no size/weight differentiation). That issue focuses on the TUI rendering path; this one is specific to the Desktop chat UI, so they may need separate fixes, but the root problem is the same.

   If you believe your issue is distinct, please clarify the differences so we can track them separately.
5. thdxr

   removed

   bugSomething isn't workingSomething isn't working

   windows

   webRelates to opencode on web / desktopRelates to opencode on web / desktop

   on May 3, 2026
6. semidark

   marked fix(ui): Markdown headings are indistinguishable from normal text #30542 as a duplicate of this issue on Jun 3, 2026
7. semidark commented on Jun 3, 2026

   

   semidark

   on Jun 3, 2026

   More actions

   I’d like to add some implementation detail and a concrete proposal that should make this easier to fix.

   Current behavior & root cause

   In the web/desktop UI, all markdown headings (h1–h6) rendered inside chat messages are effectively styled as body text. They share:

   • the same font size: 14px
   • the same color: var(--text-strong)
   • only a marginally heavier font weight: var(--font-weight-medium) (500 vs 400 for body)

   From packages/ui/src/components/markdown.css:

   /* Headings: Same size, distinguished by color and spacing */
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
     font-size: 14px;
     color: var(--text-strong);
     font-weight: var(--font-weight-medium);
     margin-top: 0px;
     margin-bottom: 24px;
     line-height: var(--line-height-large);
   }

   In practice:

   • There is almost no visual hierarchy between heading levels.
   • Headings are nearly indistinguishable from bold text inside messages.
   • Long, structured responses (plans, summaries, multi-step guides) are hard to scan, even when the model is instructed to use markdown headings.

   The theme system already defines a dedicated heading color token, but it’s not used here:

   /* packages/ui/src/styles/theme.css */
   
   --font-size-small: 13px;
   --font-size-base: 14px;
   --font-size-large: 16px;
   --font-size-x-large: 20px;
   …
   --markdown-heading: #9d7cd8;

   So the root cause is:

   1. All heading levels share the body font size.
   2. They use the same color as body copy.
   3. The existing --markdown-heading token is defined but unused.

   Proposed fix

   Use the existing design tokens to create a clear but not overwhelming hierarchy for headings inside chat messages, and wire in --markdown-heading (with a safe fallback for custom themes).

   Suggested change for packages/ui/src/components/markdown.css:

   /* Headings: scaled sizes with distinct color */
   h1 {
     font-size: 20px; /* matches --font-size-x-large */
     font-weight: 600;
     color: var(--markdown-heading, var(--text-strong));
     margin-top: 16px;
     margin-bottom: 8px;
     line-height: var(--line-height-large);
   }
   
   h2 {
     font-size: 16px; /* matches --font-size-large */
     font-weight: 600;
     color: var(--markdown-heading, var(--text-strong));
     margin-top: 16px;
     margin-bottom: 8px;
     line-height: var(--line-height-large);
   }
   
   h3 {
     font-size: 14px; /* matches --font-size-base */
     font-weight: 700;
     color: var(--markdown-heading, var(--text-strong));
     margin-top: 12px;
     margin-bottom: 6px;
     line-height: var(--line-height-large);
   }
   
   h4,
   h5,
   h6 {
     font-size: 14px; /* base size, used mainly for hierarchy via weight/spacing */
     font-weight: 600;
     color: var(--markdown-heading, var(--text-strong));
     margin-top: 8px;
     margin-bottom: 4px;
     line-height: var(--line-height-large);
   }

   Notes:

   • Font sizes map directly to existing tokens:
     • h1 → --font-size-x-large (20px)
     • h2 → --font-size-large (16px)
     • h3+ → --font-size-base (14px)
   • var(--markdown-heading, var(--text-strong)) keeps existing themes working and falls back cleanly for custom themes that don’t define --markdown-heading.
   • Spacing is reduced and differentiated by level to keep the chat layout compact while still making sections scannable.
8. semidark commented on Jun 3, 2026

   

   semidark

   on Jun 3, 2026

   More actions

   workaround

   My current is to use the stylus browser extension and have it inject the following css to my opencode webui:

   [data-component="markdown"] h1 {
       font-size: 20px !important;
       font-weight: 700 !important;
       border-bottom: 1px solid currentColor;
   }
   [data-component="markdown"] h2 {
       font-size: 17px !important;
       font-weight: 600 !important;
   }
   [data-component="markdown"] h3 {
       font-size: 15px !important;
       font-weight: 600 !important;
   }

   Before

   

   After

   
9. github-actions commented on Aug 3, 2026

   

   github-actionsBot

   on Aug 3, 2026 – with GitHub Actions

   Contributor

   More actions

   To stay organized issues are automatically closed after 60 days of no activity. If the issue is still relevant please open a new one.
10. github-actions

    closed this as not plannedon Aug 3, 2026