Fix #5594: Align pre element with baseline grid using nudge system
Summary
This PR fixes issue #5594 by aligning the <pre> element with the baseline grid using the nudge system.
Changes
- Updated
paddingto use$spv-nudgefor top padding and($spv--small - $spv-nudge)for bottom padding - Adjusted
margin-bottomto$spv--x-large - $spv-nudgeto compensate for the nudge value
What this fixes
The <pre> element was not properly aligned with the baseline grid because it wasn't using the nudge system that other text elements use. This fix applies the standard nudge pattern:
- Adds nudge value to padding-top to shift content down
- Compensates at padding-bottom to maintain total height
- Adjusts margin-bottom to account for the nudge
QA
- Open any page with
<pre>elements in the documentation - Verify that the pre elements now align properly with the baseline grid
- Check that the visual appearance and spacing remains correct
Checklist
- [ ] PR should have the
Bug 🐛label - [ ] Package version update (if needed for release)
Nayab-Gauhar is not a collaborator of the repo
@jmuzina It looks like thats due to the margin of the <pre> element being 2 pixels too large. Since the height of the element is divisible by the baseline the margin in this case must be divisible by the baseline as well. (If the element height would not be divisible by the baseline then the margin would need to account for it so element + margin is on the baseline again).