Stop ButtonLink wrapping unnecessarily on InfoBanner

[minimalsm]

Is your feature request related to a problem? Please describe.

When the paragraph content on our InfoBanner component wraps, it also causes the ButtonLink text to wrap unnecessarily.

Describe the solution you'd like

When the text wraps onto a second line, the button should not wrap unless it runs out of space.

Screenshots

Example in Dutch

Example in English

Desired solution

Additional context

There are some cases where we DO want this ButtonLink copy to wrap, so removing adding white-space: nowrap; in all cases doesn't seem like a viable solution.

Want to contribute?

We love contributions from the Ethereum community! Please comment on an issue if you're interested in helping out with a PR.

[KaranKaira]

would like to take this on

[maxehnert]

There are some cases where we DO want this ButtonLink copy to wrap

What would an example of that look like?

[minimalsm]

@maxehnert one example is with more verbose languages. Ukrainian often requires two lines for the Button copy or it would overflow/cause horizontal scrolling.

Here is our homepage in Ukrarian for reference:

[vluna]

Hey @minimalsm, if there is no update on this I can take a look.

[ianrandmckenzie]

Hi, just poking around the repo. I immediately thought white-space: nowrap; as well, so glad you acknowledged it. I would guess it could still work, but maybe adding a max-width of some kind could help. It may need responsive queries if going the max-width route, though. Just leaving this for whoever is/will work on it. Ping me if needed. :)

[Dark-Knight11]

Hi, I would like to work on this issue. @ianrandmckenzie would this be ok? button would be wrapped on screen size less than 480px

@media screen and (min-width: 480px) {
  .kQBZHz {
    white-space: nowrap;
  }
}

[ianrandmckenzie]

@Dark-Knight11 of course, I was just offering a suggestion. Feel free to dive in :)

[Dark-Knight11]

I thought of another method to achieve the required result instead of being dependant on screen size, we can look for length of text inside the button and apply wrapping accordingly

var x = document.getElementsByClassName('ButtonLink__StyledLinkButton-sc-a8k023-0');
var customStyle = {
    whiteSpace: "nowrap"
};
for (let i in x) {
    if (x[i].innerHTML.length < 20) {
        Object.assign(x[i].style, customStyle)
    }
}

I'm a little confused about the word limit so can anyone help me with it? @minimalsm can u please look into this If its good to go then lmk in which file should I write this code

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity.

[Andy-Waine]

@minimalsm - I know this issue has gone a little stale, but please see the PR that corrects this. I did end up using white-space: nowrap;, but I applied the property directly as inline-styling to ONLY the button mentioned in the issue (in 17 different language iterations), this way no changes will occur to any other ButtonLink tags on the site. Thanks!

[minimalsm]

Closed by #7447