Change actionlist item inline description styling

[barmo]

Closes https://github.com/github/memex/issues/23884

Changelog

New

na

Changed

Actionlist item inline description styling change from flex to block for handling overflow to be on the next line below the label text. Change can be seen with "The everything bagel" example (prod storybook)

Before	After

This overflow behavior is consistent with the reviewers for pull requests for example

Removed

na

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Planning to go to OH today to ask more about this, but I added the "All combination" storybook in the vrt in a different pr so that this change can be better documented/visible for review via the vrt. Will update later today

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 25531d8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[Copilot]

Pull request overview

This PR fixes the overflow behavior of ActionList items with inline descriptions by changing the layout from flex to block/inline display model. Previously, when an ActionList item's label and inline description together exceeded the available width, both would overflow to the next line within their flex container bounds. After this change, the label stays on the first line and only the inline description wraps to the next line below the label text.

Key Changes:

• Modified the inline description layout from flexbox to block/inline display model for proper text wrapping
• Removed flex-specific properties (flex-direction, align-items, gap) and added inline display with margin-left spacing
• Added overflow-wrap property to ensure the inline description breaks words appropriately

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
packages/react/src/ActionList/ActionList.module.css	Changed inline description styling from flex layout to block/inline display model with appropriate spacing and overflow handling
.changeset/deep-impalas-wave.md	Added changeset documenting the patch-level fix for inline description overflow

[barmo]

Here is a loom recording of the before (prod) and after (deploy preview) with the changes of this pr on dotcom

deploy preview link (expires ~6pm CT)

Otherwise here's a table with screenshots testing this ui fix in two different places

	Before	After
Selector in Projects table
Selector within issues

EDIT
The loom video is not up to date (the vertical spacing is a smidge too big) with this commit 9f6ac86. The deploy preview and the screenshots ARE up to date with the latest code changing commit 25531d8

[barmo]

Setting the line-height was necessary because with flex previously, the container height is determined by the tallest item's content. With the display:block, the block/inline layout inherits line-height from ancestor elements, which can vary depending on context and create extra vertical spacing. We need to reset this to prevent the spacing mismatch.

Including the disable instead of using a Primer typography variable was necessary because

• There's no Primer variable that represents a "reset" or "normal" line-height
• Using explicit values like 20px or var(--control-medium-lineBoxHeight) didn't work consistently across all contexts - some VRT tests passed while others failed
• line-height: normal lets the browser calculate the natural line-height based on the font metrics, which produces consistent results that match the original flex baseline alignment behavior across all usage contexts

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/10057

[primer-integration]

🔬 github-ui Integration Test Results

Check	Status	Details
CI	✅ Passed	View run
Projects (Memex)	✅ Passed	View run
VRT	✅ Passed	View run

✨ All checks passed! Your integration PR is ready for review.