[UnniKohonen]

Reasons for creating this PR

Mappings are currently visually broken on mobile. Very long labels overlap with vocab names like in the attached photo (https://test.dev.finto.fi/yso/fi/page/p39593)

This PR adds a new layout for very narrow screens and makes long labels overflow to the next line.

Link to relevant issue(s), if any

• Part of Epic: Mobile Layout #1753
• Closes Test mobile usage and fix critical regressions #1900

Description of the changes in this PR

• New layout for screens below sm break point (see attached image)
• Remove unnecessary top border from first mapping
• Overflow long labels to the next line
• Set main content margins correctly for screens below md breakpoint

Addresses requirement 2.1 in #1753

Known problems or uncertainties in this PR

Not sure if breaking long labels is really the best approach but it is an improvement over the status quo.

Checklist

• phpUnit tests pass locally with my changes
• I have added tests that show that the new code works, or tests are not relevant for this PR (e.g. only HTML/CSS changes)
• The PR doesn't reduce accessibility of the front-end code (e.g. tab focus, scaling to different resolutions, use of .sr-only class, color contrast)
• The PR doesn't introduce unintended code changes (e.g. empty lines or useless reindentation)

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 70.99%. Comparing base (62f0012) to head (949bb1a).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##               main    #2134   +/-   ##
=========================================
  Coverage     70.99%   70.99%           
  Complexity     1723     1723           
=========================================
  Files            34       34           
  Lines          4479     4479           
=========================================
  Hits           3180     3180           
  Misses         1299     1299           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Vainonen]

This seems to improve mobile viewing as good as possible, so looks fine time. The same fix with break-work could be applied to some other elements in the page, e. g. Skosmos widgets. I noticed that the vocabulary name is not broken with break-word. After commenting that prop-mapping-vocab should also be "broken" I am not sure if breaking URLs to two lines is a good idea. I got the screenshot with very large zoom level.

[Vainonen]

The break-word should also be included to prop-mapping-vocab class, because vocabulary names might too overflow:

[Vainonen]

Fine, now the overflown URIs are broken into multiple lines and this can finally be merged.