Skip to content

CSS: Prevent spinner distortion in flex containers with multiline content #41654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

CSS: Prevent spinner distortion in flex containers with multiline content #41654

wants to merge 1 commit into from
+1 −0

Conversation

julien-deramond
Copy link
Member

@julien-deramond julien-deramond commented Aug 10, 2025 •
edited
Loading

Description

This PR fixes #41578 by using the method suggested by @mdo at #41578 (comment), instead of updating the documentation to use our .flex-shrink-0 utility as proposed at #41578 (comment).

It can be tested directly in the docs with the following code:

<div class="d-flex align-items-center" style={{ width: '30px' }}>
  <strong>A long string of text that will wrap to the next line...</strong>
  <div class="spinner-border ms-auto" aria-hidden="true"></div>
</div>

We already used this kind of defensive CSS approach with this same flex-shrink: 0 CSS rule in #38955.

It can possibly be released in v5.3.8 as it should be non-breaking.

Type of changes

  • Bug fix (non-breaking change which fixes an issue)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • (N/A) My change introduces changes to the documentation
  • (N/A) I have updated the documentation accordingly
  • (N/A) I have added tests to cover my changes
  • All new and existing tests passed

Live previews

For non-regression visual testing:

Related issues

Closes #41578

@github-project-automation github-project-automation bot moved this to To do in v5.3.8 Aug 10, 2025
@julien-deramond julien-deramond moved this from To do to Needs review in v5.3.8 Aug 10, 2025
@julien-deramond julien-deramond changed the title CSS: Fix spinner deformation in flex boxes when content is multiline CSS: Prevent spinner distortion in flex containers with multiline content Aug 10, 2025
@julien-deramond julien-deramond marked this pull request as ready for review August 10, 2025 20:08
@julien-deramond julien-deramond requested a review from a team as a code owner August 10, 2025 20:08
@mdo mdo requested a review from Copilot August 10, 2025 20:20
Copilot
Copilot AI reviewed Aug 10, 2025
View reviewed changes
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes spinner distortion in flex containers when paired with multiline content by adding a defensive CSS rule. The fix prevents spinners from being compressed when flex items don't have enough space.

  • Adds flex-shrink: 0 to both .spinner-border and .spinner-grow classes
  • Prevents visual distortion when spinners are used alongside text content that wraps in flex containers
  • Follows existing defensive CSS patterns used elsewhere in the codebase

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

Copilot code review Copilot Copilot left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
css v5
Projects
v5.3.8
Status: Needs review
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Spinner deforms in flex box when sibling content is multiline
1 participant
@julien-deramond