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
Merged
merged 1 commit into from
Aug 22, 2025
Merged

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

merged 1 commit into from
Aug 22, 2025

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

@mdo mdo force-pushed the main-jd-fix-spinner-deformation-in-flexboxes branch from 79773c8 to fa8e4c3 Compare August 21, 2025 12:56
@mdo mdo merged commit f50f38b into main Aug 22, 2025
14 checks passed
@mdo mdo deleted the main-jd-fix-spinner-deformation-in-flexboxes branch August 22, 2025 04:00
@github-project-automation github-project-automation bot moved this from Needs review to Done in v5.3.8 Aug 22, 2025
This was referenced Aug 27, 2025
Open
Open
This was referenced Sep 8, 2025
Open
Merged
mergify bot added a commit to ArcadeData/arcadedb that referenced this pull request Sep 8, 2025
@mergify
chore(studio-deps)(deps): bump the security-critical group in /studio…
c6eff17 
… with 2 updates [skip ci]

Bumps the security-critical group in /studio with 2 updates: [bootstrap](https://github.com/twbs/bootstrap) and [sweetalert2](https://github.com/sweetalert2/sweetalert2).
Updates `bootstrap` from 5.3.7 to 5.3.8
Release notes

*Sourced from [bootstrap's releases](https://github.com/twbs/bootstrap/releases).*

> v5.3.8
> ------
>
> What's Changed
> --------------
>
> * Streamline release prep script by [`@​mdo`](https://github.com/mdo) in [twbs/bootstrap#41539](https://redirect.github.com/twbs/bootstrap/pull/41539)
> * Docs: restore local dev port to 9001 by [`@​chalin`](https://github.com/chalin) in [twbs/bootstrap#41545](https://redirect.github.com/twbs/bootstrap/pull/41545)
> * Docs: use Example shortcode instead of divs with only `.bd-example` class by [`@​julien-deramond`](https://github.com/julien-deramond) in [twbs/bootstrap#41556](https://redirect.github.com/twbs/bootstrap/pull/41556)
> * Docs: fix scss autorecompile in dev mode by [`@​MaxLardenois`](https://github.com/MaxLardenois) in [twbs/bootstrap#41574](https://redirect.github.com/twbs/bootstrap/pull/41574)
> * Fix `color-contrast()` function for WCAG 2.1 compliance by [`@​julien-deramond`](https://github.com/julien-deramond) in [twbs/bootstrap#41585](https://redirect.github.com/twbs/bootstrap/pull/41585)
> * OSSF Scorecard by [`@​mdo`](https://github.com/mdo) in [twbs/bootstrap#41571](https://redirect.github.com/twbs/bootstrap/pull/41571)
> * Workflows: Use SHA-1 for third-party actions by [`@​julien-deramond`](https://github.com/julien-deramond) in [twbs/bootstrap#41595](https://redirect.github.com/twbs/bootstrap/pull/41595)
> * Docs: unminify downloadable example HTML files by [`@​julien-deramond`](https://github.com/julien-deramond) in [twbs/bootstrap#41637](https://redirect.github.com/twbs/bootstrap/pull/41637)
> * Docs: Add tooltips to buttons when `<Example>` is used, not just `<Code>` by [`@​louismaximepiton`](https://github.com/louismaximepiton) in [twbs/bootstrap#41582](https://redirect.github.com/twbs/bootstrap/pull/41582)
> * Set cursor pointer on input search cancel button by [`@​mdo`](https://github.com/mdo) in [twbs/bootstrap#41639](https://redirect.github.com/twbs/bootstrap/pull/41639)
> * CSS: Prevent spinner distortion in flex containers with multiline content by [`@​julien-deramond`](https://github.com/julien-deramond) in [twbs/bootstrap#41654](https://redirect.github.com/twbs/bootstrap/pull/41654)
> * Migrate MyGet script to GH actions by [`@​supergibbs`](https://github.com/supergibbs) in [twbs/bootstrap#41583](https://redirect.github.com/twbs/bootstrap/pull/41583)
> * Revert "Attempt to return focus explicitly to dropdown trigger" by [`@​mdo`](https://github.com/mdo) in [twbs/bootstrap#41668](https://redirect.github.com/twbs/bootstrap/pull/41668)
> * docs: Minor range example code optimization by [`@​coliff`](https://github.com/coliff) in [twbs/bootstrap#41665](https://redirect.github.com/twbs/bootstrap/pull/41665)
> * Remove Themes from docs by [`@​mdo`](https://github.com/mdo) in [twbs/bootstrap#41671](https://redirect.github.com/twbs/bootstrap/pull/41671)
> * Release v5.3.8 by [`@​mdo`](https://github.com/mdo) in [twbs/bootstrap#41669](https://redirect.github.com/twbs/bootstrap/pull/41669)
>
> Dependencies
> ------------
>
> * Build(deps-dev): Bump the development-dependencies group with 3 updates by [`@​julien-deramond`](https://github.com/julien-deramond) in [twbs/bootstrap#41540](https://redirect.github.com/twbs/bootstrap/pull/41540)
> * Build(deps-dev): Bump the development-dependencies group with 2 updates by [`@​julien-deramond`](https://github.com/julien-deramond) in [twbs/bootstrap#41544](https://redirect.github.com/twbs/bootstrap/pull/41544)
> * Build(deps-dev): Bump stylelint-config-twbs-bootstrap from 16.0.0 to 16.1.0 by [`@​julien-deramond`](https://github.com/julien-deramond) in [twbs/bootstrap#41546](https://redirect.github.com/twbs/bootstrap/pull/41546)
> * Build(deps-dev): Bump the development-dependencies group with 5 updates by [`@​julien-deramond`](https://github.com/julien-deramond) in [twbs/bootstrap#41552](https://redirect.github.com/twbs/bootstrap/pull/41552)
> * Build(deps-dev): Bump the development-dependencies group with 4 updates by [`@​julien-deramond`](https://github.com/julien-deramond) in [twbs/bootstrap#41560](https://redirect.github.com/twbs/bootstrap/pull/41560)
> * Build(deps-dev): Bump the development-dependencies group with 3 updates by [`@​julien-deramond`](https://github.com/julien-deramond) in [twbs/bootstrap#41566](https://redirect.github.com/twbs/bootstrap/pull/41566)
> * Build(deps): Bump actions/upload-artifact from 4.6.1 to 4.6.2 by [`@​dependabot`](https://github.com/dependabot)[bot] in [twbs/bootstrap#41594](https://redirect.github.com/twbs/bootstrap/pull/41594)
> * Build(deps-dev): Bump the development-dependencies group with 4 updates by [`@​julien-deramond`](https://github.com/julien-deramond) in [twbs/bootstrap#41599](https://redirect.github.com/twbs/bootstrap/pull/41599)
> * Build(deps-dev): Bump the development-dependencies group with 2 updates by [`@​julien-deramond`](https://github.com/julien-deramond) in [twbs/bootstrap#41609](https://redirect.github.com/twbs/bootstrap/pull/41609)
> * Build(deps): Bump github/codeql-action from 3.29.2 to 3.29.3 by [`@​dependabot`](https://github.com/dependabot)[bot] in [twbs/bootstrap#41611](https://redirect.github.com/twbs/bootstrap/pull/41611)
> * Build(deps): Bump streetsidesoftware/cspell-action from 7.1.1 to 7.1.2 by [`@​dependabot`](https://github.com/dependabot)[bot] in [twbs/bootstrap#41610](https://redirect.github.com/twbs/bootstrap/pull/41610)
> * Build(deps-dev): Bump the development-dependencies group with 4 updates by [`@​julien-deramond`](https://github.com/julien-deramond) in [twbs/bootstrap#41621](https://redirect.github.com/twbs/bootstrap/pull/41621)
> * Build(deps): Bump streetsidesoftware/cspell-action from 7.1.2 to 7.2.0 by [`@​dependabot`](https://github.com/dependabot)[bot] in [twbs/bootstrap#41625](https://redirect.github.com/twbs/bootstrap/pull/41625)
> * Build(deps): Bump actions-cool/issues-helper from 3.6.0 to 3.6.2 by [`@​dependabot`](https://github.com/dependabot)[bot] in [twbs/bootstrap#41623](https://redirect.github.com/twbs/bootstrap/pull/41623)
> * Build(deps): Bump github/codeql-action from 3.29.3 to 3.29.4 by [`@​dependabot`](https://github.com/dependabot)[bot] in [twbs/bootstrap#41624](https://redirect.github.com/twbs/bootstrap/pull/41624)
> * Build(deps-dev): Bump the development-dependencies group across 1 directory with 3 updates by [`@​dependabot`](https://github.com/dependabot)[bot] in [twbs/bootstrap#41626](https://redirect.github.com/twbs/bootstrap/pull/41626)
> * Build(deps): Bump github/codeql-action from 3.29.4 to 3.29.5 by [`@​dependabot`](https://github.com/dependabot)[bot] in [twbs/bootstrap#41640](https://redirect.github.com/twbs/bootstrap/pull/41640)
> * Build(deps): Bump tmp from 0.2.3 to 0.2.4 by [`@​dependabot`](https://github.com/dependabot)[bot] in [twbs/bootstrap#41649](https://redirect.github.com/twbs/bootstrap/pull/41649)
> * Build(deps): Bump github/codeql-action from 3.29.7 to 3.29.8 by [`@​dependabot`](https://github.com/dependabot)[bot] in [twbs/bootstrap#41657](https://redirect.github.com/twbs/bootstrap/pull/41657)
> * Build(deps): Bump actions/checkout from 4.2.2 to 5.0.0 by [`@​dependabot`](https://github.com/dependabot)[bot] in [twbs/bootstrap#41655](https://redirect.github.com/twbs/bootstrap/pull/41655)
> * Build(deps): Bump github/codeql-action from 3.29.8 to 3.29.10 by [`@​dependabot`](https://github.com/dependabot)[bot] in [twbs/bootstrap#41664](https://redirect.github.com/twbs/bootstrap/pull/41664)
>
> New Contributors
> ----------------
>
> * [`@​chalin`](https://github.com/chalin) made their first contribution in [twbs/bootstrap#41545](https://redirect.github.com/twbs/bootstrap/pull/41545)
>
> **Full Changelog**: <twbs/bootstrap@v5.3.7...v5.3.8>


Commits

* [`25aa8cc`](twbs/bootstrap@25aa8cc) Release v5.3.8 ([#41669](https://redirect.github.com/twbs/bootstrap/issues/41669))
* [`122bff5`](twbs/bootstrap@122bff5) Remove Themes from docs ([#41671](https://redirect.github.com/twbs/bootstrap/issues/41671))
* [`320f713`](twbs/bootstrap@320f713) docs: Minor range example code optimization ([#41665](https://redirect.github.com/twbs/bootstrap/issues/41665))
* [`ac5f51c`](twbs/bootstrap@ac5f51c) Revert "Attempt to return focus explicitly to dropdown trigger ([#41365](https://redirect.github.com/twbs/bootstrap/issues/41365))" ([#41](https://redirect.github.com/twbs/bootstrap/issues/41)...
* [`4bd8b6c`](twbs/bootstrap@4bd8b6c) Migrate MyGet script to GH actions ([#41583](https://redirect.github.com/twbs/bootstrap/issues/41583))
* [`f50f38b`](twbs/bootstrap@f50f38b) CSS: Fix spinner deformation in flex boxes when content is multiline ([#41654](https://redirect.github.com/twbs/bootstrap/issues/41654))
* [`47c75b8`](twbs/bootstrap@47c75b8) Set cursor pointer on input search cancel button ([#41639](https://redirect.github.com/twbs/bootstrap/issues/41639))
* [`26c86ba`](twbs/bootstrap@26c86ba) Build(deps): Bump github/codeql-action from 3.29.8 to 3.29.10 ([#41664](https://redirect.github.com/twbs/bootstrap/issues/41664))
* [`099b02b`](twbs/bootstrap@099b02b) Build(deps-dev): Bump rollup from 4.46.2 to 4.46.3
* [`4b8a2c9`](twbs/bootstrap@4b8a2c9) Build(deps-dev): bump dependencies
* Additional commits viewable in [compare view](twbs/bootstrap@v5.3.7...v5.3.8)
  
Updates `sweetalert2` from 11.22.4 to 11.23.0
Release notes

*Sourced from [sweetalert2's releases](https://github.com/sweetalert2/sweetalert2/releases).*

> v11.23.0
> --------
>
> [11.23.0](sweetalert2/sweetalert2@v11.22.4...v11.23.0) (2025-09-04)
> ==============================================================================================
>
> ### Features
>
> * replace deprecated word-wrap with overflow-wrap ([2667a49](sweetalert2/sweetalert2@2667a49))
>
> v11.22.5
> --------
>
> No release notes provided.


Changelog

*Sourced from [sweetalert2's changelog](https://github.com/sweetalert2/sweetalert2/blob/main/CHANGELOG.md).*

> [11.23.0](sweetalert2/sweetalert2@v11.22.4...v11.23.0) (2025-09-04)
> ==============================================================================================
>
> ### Features
>
> * replace deprecated word-wrap with overflow-wrap ([2667a49](sweetalert2/sweetalert2@2667a49))


Commits

* [`fc465a4`](sweetalert2/sweetalert2@fc465a4) chore(release): 11.23.0 [skip ci]
* [`2667a49`](sweetalert2/sweetalert2@2667a49) feat: replace deprecated word-wrap with overflow-wrap
* [`cf4b189`](sweetalert2/sweetalert2@cf4b189) chore: bump yarn.lock
* [`b27bacf`](sweetalert2/sweetalert2@b27bacf) chore: add venuslovedolls to sponsors
* [`9dc7802`](sweetalert2/sweetalert2@9dc7802) chore(deps): update dependency cypress to v15 ([#2857](https://redirect.github.com/sweetalert2/sweetalert2/issues/2857))
* [`f824237`](sweetalert2/sweetalert2@f824237) chore: remove code comment that got missed in PR [#2847](https://redirect.github.com/sweetalert2/sweetalert2/issues/2847) ([#2854](https://redirect.github.com/sweetalert2/sweetalert2/issues/2854))
* [`2af063c`](sweetalert2/sweetalert2@2af063c) chore(deps): update dependency eslint-plugin-jsdoc to v54 ([#2851](https://redirect.github.com/sweetalert2/sweetalert2/issues/2851))
* [`80d573e`](sweetalert2/sweetalert2@80d573e) chore(deps): update dependency eslint-plugin-jsdoc to v53 ([#2850](https://redirect.github.com/sweetalert2/sweetalert2/issues/2850))
* [`4a490d5`](sweetalert2/sweetalert2@4a490d5) chore(deps): update actions/checkout action to v5 ([#2849](https://redirect.github.com/sweetalert2/sweetalert2/issues/2849))
* [`47b4da4`](sweetalert2/sweetalert2@47b4da4) Update SPONSORS.md
* See full diff in [compare view](sweetalert2/sweetalert2@v11.22.4...v11.23.0)
  
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
Dependabot commands and options
  
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- `@dependabot show  ignore conditions` will show all of the ignore conditions of the specified dependency
- `@dependabot ignore  major version` will close this group update PR and stop Dependabot creating any more for the specific dependency's major version (unless you unignore this specific dependency's major version or upgrade to it yourself)
- `@dependabot ignore  minor version` will close this group update PR and stop Dependabot creating any more for the specific dependency's minor version (unless you unignore this specific dependency's minor version or upgrade to it yourself)
- `@dependabot ignore ` will close this group update PR and stop Dependabot creating any more for the specific dependency (unless you unignore this specific dependency or upgrade to it yourself)
- `@dependabot unignore ` will remove all of the ignore conditions of the specified dependency
- `@dependabot unignore  ` will remove the ignore condition of the specified dependency and ignore conditions
This was referenced Sep 14, 2025
Merged
Merged
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

@mdo mdo mdo approved these changes

Assignees
No one assigned
Labels
css v5
Projects
No open projects
v5.3.8
Status: Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Spinner deforms in flex box when sibling content is multiline
2 participants
@julien-deramond @mdo