Fix: Long-string overflow [Fixes #14013]

[jorgezerpa]

Description

I Created a new class ".long_ethereum_address" in global.css file. Such class has the property word-break set to break-all to allow the text to break to the next line if it is necessary.

Then I wrapped the address into an span element that has the mentionend class.

Finally I checked the same page for other languages, and found that has the same error. So I repeated the same process on all related files (for each different translation).

Related Issue -> [#14013]

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	2b480aa
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/66fe88abcee7220008aa6044
😎 Deploy Preview	https://deploy-preview-14037--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 48 (🟢 up 2 from production) Accessibility: 93 (no change from production) Best Practices: 89 (🔴 down 9 from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[wackerow]

Hey @jorgezerpa, thanks for jumping on this.

I think this is good, just two things:

1. @lukassim Just noting this is updating some syntax (not content) across these pages if we can pull them to Crowdin when ready
2. @jorgezerpa We have TailwindCSS in ths repo, so let's ditch the custom class and just use the break-all class instead (see docs)

Thanks again!

ie.

<span class="break-all">`...long-string...`</span>

[wackerow]

cc: @pettinarip I think using a span here makes sense, but curious if you have any thoughts on this approach. I considered that we could apply this to the pre tag that the back-ticks will parse into, but this could result in un-intended bugs for other text that uses this syntax.

[pettinarip]

cc: @pettinarip I think using a span here makes sense, but curious if you have any thoughts on this approach. I considered that we could apply this to the pre tag that the back-ticks will parse into, but this could result in un-intended bugs for other text that uses this syntax.

The backtick will use a code tag, not the pre tag. So, I'd prefer to style code to accept break-word. Styling pre should not be necessary since we are already doing that within the Codeblock component.

In short, I would add a new component for code in our MdComponents, adding this style. What do you think?

[jorgezerpa]

Hello @wackerow I'm happy to hear this works!

I replaced the custom class with the tailwind class "break-words". I tried "break-all" but seems to not have effect here🤔 so I tried with "break-words" which has a similar behavior and it works well!

Hi @pettinarip I tried to edit code tag as first, but the property break-all didn't make effect, so I decided to wrap it into an span. But this approach of create a new component could works too🤔

[wackerow]

@pettinarip Sorry, code not pre, but still... Personally don't think applying that on code or a custom Code is wise, since we rarely want to just chop a code snippet in the middle of a word (let me know if you disagree)... imo these long hashes are unique cases where we don't mind just letting it wrap anywhere.

I like the idea of a simple custom component, but I'd suggest not naming it "Code" and instead perhaps name it functionally as "BreakAll".

[jorgezerpa]

@wackerow @pettinarip I can try create a component "BreakAll" as you mention, please confirm if it's needed 🙌

[nloureiro]

From the design side looks good! Thank you!!! @jorgezerpa

[corwintines]

#14050

I think this resolved this more globally, so going to close this out.