The Share component's alignment prop has never had any effect

Problem/Motivation

The share component exposes an alignment prop (start | end, default end, described as RTL-aware) and every content template sets alignment: end. It does nothing: the buttons sit at the start of their column on every page that uses them.

The cause is which element the rule targets. In the horizontal layout the root is the flex row holding the heading and the list:

.webshare--horizontal { display: flex; align-items: center; gap: …; }

Nothing sets justify-content on it, so it falls back to flex-start. The alignment rules instead target the inner list:

.webshare--align-end .webshare__list { justify-content: flex-end; }

.webshare__list is sized to its own content, so justify-content on it has nothing to distribute and cannot move the pair along the line.

Measured on a fresh Drupal CMS + Educare install, event full page, 1440px viewport: the share column runs x=959 to 1388, and the last icon's right edge was at 1172, 208px short of the column end, with the root computing justify-content: normal.

Design source: the VBE Stylesheet Figma file, Events-node-page and Article-node-page.

Steps to reproduce

1. Install drupal/cms with the Educare site template.
2. Open any event, news or program full page.
3. Inspect the nav.webshare element: it carries webshare--align-end, but computed justify-content is normal and the buttons sit at the start of the column.

Proposed resolution

Put the alignment on the root, using the Bootstrap 5.3 flex utility rather than more custom CSS, and only for the horizontal orientation (the vertical layout is a column, where justify-content would move items along the block axis instead):

{% set classes = orientation == 'horizontal'
  ? classes|merge(['justify-content-' ~ alignment])
  : classes %}

justify-content-start and justify-content-end are Bootstrap 5.3 utilities and writing-mode aware, so RTL needs no second rule. One file, components/molecules/share/share.twig.

Verified after the change on the same install: the root computes justify-content: flex-end, last icon right edge 1380 against a column ending at 1388 (the 8px gutter). Correct on the event, news and program full pages, with no horizontal overflow.

Remaining tasks

• ✅ File an issue
• ❌ Addition/Change/Update/Fix
• ❌ Testing to ensure no regression
• ➖ Automated unit testing coverage
• ➖ Automated functional testing coverage
• ➖ UX/UI designer responsibilities
• ➖ Readability
• ➖ Accessibility
• ➖ Performance
• ➖ Security
• ➖ Developer Documentation
• ➖ User Guide Documentation
• ❌ Reviewed by human
• ❌ Code review by maintainers
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ❌ Release notes snippet
• ❌ Release

Consider whether the now redundant .webshare--align-* .webshare__list rules should be removed in a follow-up.

User interface changes

• Share buttons now sit where the alignment prop says.

API changes

• N/A. The prop and its values are unchanged.

Data model changes

• N/A

Release notes snippet

• N/A