fix: prevent text overflow in Japanese

[melzreal]

Description

In Japanese, having the single character broken into another line, provides another word meaning. We want to make sure the text is only broken at points that still preserve the message meaning of "Last activity"

Screenshots

Before

After

Checklist

• 📗 all commit messages follow the conventional commits standard
• ⬅️ changes are compatible with RTL direction
• ♿ Changes to the UI are tested for accessibility and compliant with WCAG 2.1.
• 📝 changes are tested in Chrome, Firefox, Safari and Edge
• 📱 changes are responsive and tested in mobile
• 👍 PR is approved by @zendesk/vikings

[luis-almeida]

The style.css is the compiled "dist" file. These changes should go in the sass partial.

When it comes to the fix:

• Have we gotten any feedback from localization that text-wrap: nowrap; is ok with other locales as well? I don't see why it wouldn't be but maybe worth checking
• What happens when the text is larger than the container? Will it stretch and break the layout?

[Fredx87]

We shouldn't edit the style.css directly, as mentioned in the readme: https://github.com/zendesk/copenhagen_theme#stylesheet-and-javascript. In fact it is automatically hidden as a generated file.

We need to edit the source .scss file instead:

copenhagen_theme/styles/_request.scss

Line 135 in 6f47597

dt, dd {

.

Do we also need to change the padding of the dd element?

[melzreal]

@luis-almeida

The style.css is the compiled "dist" file. These changes should go in the sass partial.

Thank you, have discarded the changes, amended the correct file and run yarn to re-generate the files

When it comes to the fix:

• Have we gotten any feedback from localization that text-wrap: nowrap; is ok with other locales as well? I don't see why it wouldn't be but maybe worth checking
• What happens when the text is larger than the container? Will it stretch and break the layout?

Good question, I had checked quite a few languages https://pandora-v2.zende.sk/resources/accounts/184478 - and just realised the overflow wrap breaks for Greek 🤦
but for it to look good in both languages only if the container gets bigger, because the text needs more space.. I'm going to have a go at it again

[luis-almeida]

Would line-break: strict; address the issue?
Would be nice if we could keep the text-wrap not to have to change the design.

[melzreal]

Would line-break: strict; address the issue? Would be nice if we could keep the text-wrap not to have to change the design.

No, I did try but it had no effect. Have changed this to slighly reduce the container padding for the text by 5px while increasing the container 3%, so the text now looks good on most viewpoints - should I put this to Guntis for approval? Or would you recommend a different approach?

Do we also need to change the padding of the dd element?

@Fredx87 I ended up changing the container instead to allow a little more text space due to Greek looking not good with overflow wrap for the text

[luis-almeida]

Looks ok in the screenshots you added but with the full layout I think it looks a bit broken without much space between the containers:

I'm not a designer so we can still try to run this approach by Guntis but since it's not consistent with the other sidebars it would be nice to find another solution.

Would line-break: strict; address the issue? Would be nice if we could keep the text-wrap not to have to change the design.

No, I did try but it had no effect.

Did you try it along with the text-wrap: nowrap? It's meant to be used without setting any text-wrap, and if so it will keep the text-wrapping but respect asian languages. From the documentation:

Break text using the most stringent line break rule.

When I use it by itself I do see a a difference in the rendering. Note the 3rd field no longer breaks at the same place:

Before

After

If we can confirm with a Japanese speaker that the second image reads correctly, then IMO that would be the correct fix.

[melzreal]

Did you try it along with the text-wrap: nowrap? It's meant to be used without setting any text-wrap, and if so it will keep the text-wrapping but respect asian languages.

I had expected the rule to not allow it to break at all even with nowrap disabled, hence finding it wasn't affecting the text - I didn't realise the difference

If we can confirm with a Japanese speaker that the second image reads correctly, then IMO that would be the correct fix.

Confirmed with Yuko (native Japanese speaker) that its indeed fine to break at that point

[zd-svc-github-copenhagen-theme]

🎉 This PR is included in version 4.2.5 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀