fix(css): make heading scale resilient — target markdown-block, not hook class#503
Merged
fix(css): make heading scale resilient — target markdown-block, not hook class#503
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…ook class The heading size overrides used .pi-assistant-body h1 which depends on applyMessageStyleHooks() stamping the class on the right DOM node. When the hook didn't run (streaming, DOM structure changes from dep bumps, timing races), headings fell back to Tailwind v4's base reset (font-size: inherit) or browser defaults (2em) — both much too large for the sidebar. Now target 'markdown-block h1' directly. markdown-block is a stable custom element tag in pi-web-ui's light DOM that always exists in the render tree, so headings are always capped regardless of hook state. This is the root cause behind the recurring 'headings too large' reports — the same fragility pattern (hook-dependent selectors failing when upstream components change) also caused the KaTeX and thinking block issues fixed earlier.
tmustier
force-pushed
the
fix/heading-sizes
branch
from
e727016 to
b68e249
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
H1 headings in assistant messages render at browser-default size (~32px) instead of our sidebar scale (18px). This is a recurring regression — the same root cause has been behind multiple rendering issues.
Root cause
Tailwind v4's base reset (
@layer base) setsh1 { font-size: inherit; font-weight: inherit }, stripping browser defaults. Our overrides used.pi-assistant-body h1— which depends onapplyMessageStyleHooks()successfully stamping the class. When the hook fails (streaming state, DOM structure changes from dep bumps, timing), headings get no sizing at all and inherit from the parent chain.This is the same fragility pattern that caused:
All relied on hook-dependent class selectors matching specific DOM structures.
Fix
Target
markdown-block h1instead of.pi-assistant-body h1.markdown-blockis a stable custom element tag in pi-web-ui's light DOM — it always exists in the render tree regardless of hook state, streaming, or upstream component changes..pi-assistant-body h1(hook-dependent)markdown-block h1(always matches)Testing
npm run build✅npm run test:context✅ (640/640)