canonical / canonical/vanilla-framework
<small> can be larger than surrounding text
- Dominant language
- HTML
- Stars
- 983
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
Vanilla sets the font size of `` in `rem`, that is, relative to the font size of the `` element:
```css
@media screen
… .p-heading-icon__title, small, .p-text--small, … {
font-size: .875rem;
…
}
```
Unfortunately, this means that if the surrounding text is already smaller than 0.875rem, `` ends up _bigger_ than the text around it.
For example, on [a CVE page](https://ubuntu.com/security/CVE-2020-16126), links to “Launchpad, Ubuntu, Debian” use `` because they’re less important than than the package name above — but Vanilla styles them bigger than the package name.
~~Vanilla does not try to size the `` element at all, so it’s also internally inconsistent.~~
What should happen: `` should always be smaller than the surrounding text.
Contributor guide
Research direction
Start by locating the Vanilla CSS rule that styles the `small` element alongside `.p-heading-icon__title` and `.p-text--small`, then inspect how it behaves when surrounding text is smaller than the root font size. Use the CVE page example to verify that `` remains smaller than its surrounding text; the issue's expected behavior is the completion criterion.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100