Deployment Guide Overview Tags wrapping looks weird from 720-748px

[trueberryless]

📝 Issue Description

In Talking and Doc'ing, HiDeoo discovered that the "On demand" and "Static" tags look weirdly wrapped when the screen width is between 720px and 748px (both inclusive).

Solution

Set the --column-min-width to 14rem in this line:

docs/src/components/NavGrid/Grid.astro

Line 15 in a42ce7e

--column-min-width: 13rem;

I tested that this change does not badly infect the backend, CMS, integrations, recipes, migration and media overviews.

📋 On which page(s) it occurs

https://docs.astro.build/en/guides/deploy/ (when #12735 is merged)

🤔 Expected Behavior

All tags should look clean on all screen sizes like that (screenshot after the value got changed to 14rem):

👀 Current Behavior

Currently the tags look like this on e.g. 720px (screenshot before the value got changed, the current value is 13rem):

🖥️ Browser

Zen Browsers

📄 Additional Information

Please label this issue as "good first issue" so people who want to contribute to the project can pick this issue up and create their first PR 🙌

[ArmandPhilippot]

Thanks for opening this issue, Felix! I wonder if the fix is that simple though... I was checking the other languages to see if this could work and I noticed the Korean version is also off even on large viewports. Static is translated 정적 사이트 (no spaces) while this is currently rendered like this:

I don't know the Korean alphabet, so I don't know if this is fine but I suspect the word shouldn't break. (maybe @jsparkdev could confirm)

I was testing a few things in the browser and updating .sl-badge with the following seems to work with all languages:

-overflow-wrap: anywhere;
+overflow-wrap: break-word;
/* This is required for Korean, and I guess for all non-latin languages */
+word-break: keep-all;

(Edit: I only tested that in Firefox on Linux, so this would need more testing!)
(Edit bis: I know you have long words in German, so this could be an issue the other way around...)

But the English version is rendered like this:

It would probably be better if static was vertically centered. (display: flex; align-items: center; maybe)

But this is a Starlight component, not an Astro Docs one. So maybe the way words wrap in badges should be fixed in Starlight instead? I don't know if this could break other things though (e.g. when used in the sidebar?).

[trueberryless]

Ohhh, thanks Armand for investigating this! I completely forgot about checking different languages. That's a great catch. 🤝

Just for clarification: Did your changes to .sl-badge display the badges in one line in Korean? Cause when I try them out, it is still in two lines, but I assume that the difference is that the Korean word 정적 사이트 is not broken between 사 and 이트 anymore, which is your concern.

Considering that, I think your suggestion is way better and we could even leave the 13rem as we fix the issue on the word level and not the width of the container 🙌

It would probably be better if static was vertically centered. (display: flex; align-items: center; maybe)

Hmmm, that's a tricky one, as I think in this small context it would fit better, but if text is really long and spans multiple lines, it could look weird. I have another suggestion for this tho: We could add align-items: flex-start; which would look like this (alto this is maybe opinionated and only I find it better 🤷):

Regarding your suggestion to implement this in Starlight natively, I tested it out a little bit and for the sidebar it looks okay-ish, not what I expected, but I guess the positioning of the caret would need adapting as well, which is another concern, so let's focus on badges here 👍

(Edit bis: I know you have long words in German, so this could be an issue the other way around...)

What triggers me a little bit about the badge - as you can see in the second badge in the image above - is that the German normally supports ­ which in combination with hyphens: manual; (default) should solve the issue you mentioned about long German words. Here is an example image where it is not necessary to have a hyphen:

And here you can see on smaller widths the hyphen gets nicely added:

However, this doesn't seem to work in the sidebar as the string that is passed in the config is not interpreted that way. I would need to look into this "related" topic before jumping to conclusions.

AFAIK badges only occur in these two places, HiDeoo's starlight-heading-badges plugin deserializes badges to a completely different markup.

---

Sorry for the long message. Moving on I think it would make sense to fix this in Starlight, but before we transfer the issue, we might as well wait a little bit for Junseong's response and @delucis opinion maybe? 🤷
Also I'm not sure if we should remove the "good first issue" label until we know how to resolve it.

[ArmandPhilippot]

I assume that the difference is that the Korean word 정적 사이트 is not broken between 사 and 이트 anymore, which is your concern.

Yes, my issue wasn't the two lines, it was the word being cut in two. This seems identical to our c for Static which is on a new line. (but I don't know Korean, so I can't be certain this is an issue)

alto this is maybe opinionated and only I find it better

Yeah, I don't know what alignment is best. As I said this was just a quick test on the browser and this would need more thorough testing to see what works best in different situations and languages. 😅
But for this, I guess this would require custom CSS in docs rather than Starlight I think (ie. not a "bug", only a visual preference).

However, this doesn't seem to work in the sidebar as the string that is passed in the config is not interpreted that way.

Maybe because this is passed as a string rather than HTML and ­ is not interpreted? Maybe the unicode equivalent could work here?

Also I'm not sure if we should remove the "good first issue" label until we know how to resolve it.

Good call! I think it would be better yes.

[jsparkdev]

Hello.

The issue where the badge text wraps to two lines in a specific viewport can be resolved using flex-wrap: wrap.

When this is used, if the text inside the badge changes to two lines, the badges will be arranged vertically.

This allows long text to be displayed as intended.

Here is an example:

Current:

en-before.mp4

After update:

en-after.mp4

Korean Version:

Current:

ko-before.mp4

After update:

ko-after.mp4

[delucis]

Yes, I agree with @jsparkdev here! Definitely the most robust approach is to let these wrap as we can’t predict the size of different content in all the different languages.

[ArmandPhilippot]

Yeah, I wasn't sure if the tags alignment was a requirement or not. But looking again I can see the logo are not necessarily aligned in both cases so this probably the best solution here! Sometimes, I'm overthinking. 😄 I guess we can add back the good first issue tag now we have a solution for this!

If someone wants to send a PR for this, it looks like we need to add flex-wrap: wrap; to the CSS tags class in https://github.com/withastro/docs/blob/main/src/components/NavGrid/CardsNav.astro