Layout of `Admin > Badges` page broken after updating

[Richie (Richie Rich)]

Hi everyone.

Just updated to Disourse 3.4.0.beta2-dev (cde4db1c6a) only to find the layout of the admin page for Badges is a bit broken.

The list of badges is usually on the left of the screen, allowing you to manage / add / edit the badges on the right hand side of the screen.

But here’s how it looks now, there’s a great big empty and unusable space in the left-middle:

[Lilly]

can you try safe mode? I can’t reproduce this.

[Richie (Richie Rich)]

Hmm, it’s doing it in Safari and Chrome, both tested and replicated in Safe Mode too.

Ok, thanks @Lilly - it might be something else I’ve changed elsewhere, you can probably ignore this one

[Lilly]

I just did a fresh deploy to my test hosted site and badge admin is working as expected. that is odd that it’s doing that in safe mode.

I also did a check with header drop down menu instead of sidebar, as well as using the old admin nav menu, and it is still working as expected.

[Richie (Richie Rich)]

Steps to replicate:

1. Change the default locale setting to English (UK):

2. Reload Discourse in a new tab and browse to https://example.com/admin/badges where the layout is now broken:

3. Change or reset the default locale setting to it’s default of English (US):

4. Reload Discourse in a new tab and browse to https://example.com/admin/badges where the layout is now working just fine:

I have absolutely no idea how or why this is the case

But a big shout out to @JammyDodger for highlighting the root cause

Is this bug something that could be fixed?

[david (David Taylor)]

Thanks @Richie!

Looks like there are a couple of problems here.

1. The English(UK) translation is missing the new, longer, description at the top of the page. That’s because the ‘badges.description’ key has been reused, and we haven’t done an update from Crowdin since then

   This will resolve itself imminently, when translations are auto-updated

2. The layout seems to be dependent on the length of the description. In US english, I can repro the problem by going into dev tools and shortening the description

   

Even once the UK english string is updated, this is still worth fixing because other languages which use fewer characters are likely to have the same problem.

Looks like the change is related to UX: Apply admin UI to Badges (#28724) · discourse/discourse@be5c37a · GitHub (cc @ella @martin)

[Richie (Richie Rich)]

Thanks for the insight @david

[Lilly]

I’m in Canada and I’m blaming the UK for this one.

thanks Richie. I didn’t even consider the locale setting

[Jagster (Jakke Lehtonen)]

This is totally off topic, but there isn’t any English (CA), there is? So would you use UK or US locales? It may depend of course, but in general?

[Lilly]

our stuff usually defaults to US. we don’t say loo or trousers much here. lol

[Richie (Richie Rich)]

@Lilly

I’m blaming the UK for this one

Not a problem, we’ll happily claim ownership of this one on behalf of the rest of the world

[ella]

Thanks for catching that!

I added a div wrapper to make the layout more stable and fixed the issue with inconsistency when using different locales.

Should be fixed with this PR:

FIX: Prevent layout shift caused by locale description length

[Richie (Richie Rich)]

@Lilly

I’m blaming the UK for this one

My entire country thanks you for the quick fix @ella