Repository navigation
fix(event-page): keep description headings below the section title - #516
Merged
Merged
Conversation
Prose had no heading rules, so an h2 in an event description fell back to the browser default (1.5em, bold) and outranked the 20px "About" title. Size prose headings from espresso tokens, cap them at 18px semibold, and stop editor-added <strong> from pushing the weight past semibold.
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
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.
What changed
.prosehad no heading rules, so anh2in an event description fell back to the browser default (1.5em ≈ 22.5px, bold) and outranked the 20px/600 "About" title above it..proseh1/h2:--text-2xl(18px).h3–h6:--text-lg(16px). All--font-weight-semibold,--ink.margin: 0otherwise, since the base reset only coversh1–h3.<strong>inside a heading inherits the weight. The text editor wraps heading text in<strong>, andbolderpushed it past semibold.page.contentuses the same.prosewrapper).Not used: espresso
.text-*type-style classes. The heading HTML comes from the editor via| safe, so a class can't go on the element. The tokens give the same values.Known: on mobile the body is 16px, so
h3–h6match the body size and differ by weight only.Demo
Before / after (desktop, dark mode):
Testing
Manual browser check on an event whose description has an
h2wrapping<strong>. Computed styles: "About" 20px/600, descriptionh218px/600, same Inter face. CSS only, so no tests were added; E2E is left to CI.