Non-breaking content that is wider than column pushes entire column to bottom of page

[Carris-Toupin]

Problem/Motivation

Using a long badge (more than a couple of words) is causing problems with pushing content or the sidebar left very far down the page leaving large areas of white-space.

Describe the bug

Using a long badge (more than a couple of words) is causing problems with pushing content below the badge or the sidebar left very far down the page leaving large areas of white-space. The badge may be changing the calculations for these elements. Also, these long badges are not responsive and look really weird on small screens.

To Reproduce

Steps to reproduce the behavior: Create a page with a badge that is a sentence long, add a sidebar left and some other content below the badge.

Proposed resolution

It would be nice to limit how long a badge could be, but if not, fix the white space issues and the responsiveness of the badge.

Expected behavior

Badge should not break page, add white-space or push sidebar or content down.

Screenshots

If applicable, add screenshots to help explain your problem. (Need a tool to share screenshots or screencasts as URLs? Try monosnap

Desktop (please complete the following information):

• OS: iOS 12.4
• Browser Fire Fox
• Version 101.0b9

Smartphone (please complete the following information):

• Device: iPhone 13 Pro Max
• OS: iOS 15.5
• Browser Safari
• Version [e.g. 22]

Additional context

Add any other context about the problem here.

[bberndt-uaz]

This issue seems to be caused by the white-space: nowrap CSS property for badges which is coming from Bootstrap. Transferring this issue to arizona-bootstrap.

[mmunro-ltrr]

The white-space: nowrap CSS is coming from upstream Bootstrap rather than an Arizona Bootstrap override. Removing it has potential to break some existing sites & confuse anyone used to the upstream version.

[joeparsons]

In our 2024-07-10 workshop @bberndt-uaz suggested that this would be less of a problem if callouts were better supported in AZ Quickstart (see az-digital/az_quickstart#3122).

@trackleft pointed out that this definitely seems like a legit grid bug.

@akslay Suggested isolating whether this is actually an Arizona Bootstrap issue or potentially a Quickstart/Drupal markup-specific issue.

[mmunro-ltrr]

To test the Bootstrap behavior, just edit the badge text in developer tools when viewing https://getbootstrap.com/docs/5.3/components/badge/