vanilla-framework icon indicating copy to clipboard operation
vanilla-framework copied to clipboard

Fix #5594: Align pre element with baseline grid using nudge system

Open Nayab-Gauhar opened this issue 2 months ago • 2 comments

Summary

This PR fixes issue #5594 by aligning the <pre> element with the baseline grid using the nudge system.

Changes

  • Updated padding to use $spv-nudge for top padding and ($spv--small - $spv-nudge) for bottom padding
  • Adjusted margin-bottom to $spv--x-large - $spv-nudge to 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:

  1. Adds nudge value to padding-top to shift content down
  2. Compensates at padding-bottom to maintain total height
  3. 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 avatar Oct 31 '25 14:10 Nayab-Gauhar

Nayab-Gauhar is not a collaborator of the repo

webteam-app avatar Oct 31 '25 14:10 webteam-app

@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).

dgtlntv avatar Dec 01 '25 20:12 dgtlntv