Skip to content

fix(ADBLABS-217): Abstract text alignment is off at some breakpoints - #128

Open
luisSilvaEs wants to merge 1 commit into
mainfrom
fix/abstract-text-alignment
Open

luisSilvaEs wants to merge 1 commit into
mainfrom
fix/abstract-text-alignment

Conversation

@luisSilvaEs

Copy link
Copy Markdown
Collaborator

Summary of changes

  • Fix abstract number/text baseline misalignment by aligning .abstract__item children on their text baseline instead of the box top edge
  • Add flex-shrink: 0 to .abstract__number so the number column no longer compresses at intermediate viewport widths
  • Replace the invalid --s2a-typography-line-height-title-6 token with the correct --s2a-typography-line-height-heading-6, matching the font-size and letter-spacing tokens already used on the same rule

Relevant Links

Test URLs:

Checklist

  • This PR has visual changes, and has been reviewed by a designer.
  • This PR has code changes, and our linters still pass.
  • This PR affects production code, so it was browser tested (see below).

Validation

  1. Make sure all PR checks have passed.
  2. Pull down the branch and run locally or view on the PR testing link.
  3. Verify the implementation against the design and story requirements.

Validation steps

  • The abstract number aligns with the first line of its text across all breakpoints (mobile, 1024px, 1280px, 1440px, 1600px, 1920px+)
  • Non-numbered abstract blocks (unordered list, no numbers) render unaffected
  • Alignment holds in both light and dark mode

Browser Testing

We should aim to support the latest version of the listed browsers. For older versions or other browsers not on the list, content should be accessible, even if it doesn't completely match the designs.

Developers should test as they work in the browsers available on their machines. If they have access to other devices to test other browser/OS combinations, they should do that when possible.

Blocks and pages should undergo comprehensive testing to ensure they work as expected in real-use scenarios. Standard testing during pre-production should include at least these browsers.

  • Firefox
  • Chrome
  • Safari

Dark mode and light mode

Most pages support both dark and light mode, based on prefers-color-scheme.
Changes that affect the frontend should support both color schemes.

  • Frontend changes have been tested in both light mode and dark mode.

@aem-code-sync

aem-code-sync Bot commented Oct 2, 2026

Copy link
Copy Markdown

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

  • Re-run all PSI checks
  • Re-run failed PSI checks
  • Re-sync branch
Commits

@aem-code-sync

aem-code-sync Bot commented Oct 2, 2026

Copy link
Copy Markdown

This branch was successfully deployed

1 active deployment
fix/abstract-text-alignment — f4f1c486 Deployed Oct 2, 2026 by aem-code-sync[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant