Long links or words break mobile design

[marcelcremer]

🐞 bug report

• [ ] This is a regression (something that worked before, and does no longer work)
• [X] Bug is deterministically reproducable

🌍 Environment

• [ ] Web

• [X] Mobile

• Affected Browsers: Chrome

• Affected Mobile OS: Android

💬 Bug Description

When a text is not splittable (e.g. large link, or some super long word like "supercalifragilisticexpialidocious", it breaks the design on mobile pages.

🔬 Minimal Reproduction

Open the url

https://piratenpartei-rhein-erft.de/2021/02/17/sicherheit-in-videokonferenzen/

in mobile browser or chrome devtools with activated mobile mode. It'll show a result like the following:

🔥 Exception, Log-output, other relevant information

[veyxos]

Links

Das Problem liegt in assets/css/app.scss Zeile 660 i.V.m. assets/js/links.js Zeile 8 ff.

Über JS wird ein neues Element erzeugt bei welchem die CSS-Regel white-space: nowrap; greift um das "Externer Link" Icon einzublenden ohne, dass es alleine in der nächsten Zeile steht.

Das Script berücksichtigt dabei als mögliche Trennpunkte Leerzeichen und Slashes aber keine Bindestriche.

Lange Wörter

Schwierig zu fixen. Hotfix für Firefox ist die CSS-Regel hyphens: auto;.

Firefox ist derzeit der einzige Browser der automatische Silbentrennung in deutscher Sprache unterstützt.