Responsive layout for the vocabulary home page + layout adjustments

[osma]

Reasons for creating this PR

The vocabulary home page renders badly in a narrow browser window. This was noted in #1739 which was fixed in PR #1742, but only for the concept page. This PR does a similar adjustment to the vocabulary home page.

Additionally, this adjusts the gutters, padding and margins for both the vocabulary home page and the concept page so that they better match each other and the visual specification.

Here's how the vocabulary home page looks in a narrowish (~900px) browser window:

Link to relevant issue(s), if any

• part of CSS Improvements for Vocabulary Front Page #1684

Description of the changes in this PR

• make the grey gutters between columns a bit larger, and the grey bar above main content a bit narrower, trying to match the visual spec (but this depends a lot on the browser; I mainly used Firefox)
• make property/value columns on the vocabulary home page responsive
• various small margin/padding/gutter adjustments, mainly for the vocabulary home page but also some for the concept page

Known problems or uncertainties in this PR

I hope I didn't break layouts on other page types.

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)

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[joelit]

LGTM! This fixes the layout on the 767...992px range. It would be a good idea to create specs for the mobile layout (sub 767px) layout to make sure the logic stays consistent. I take it that the idea is to use sm, md & lg breakpoints for the responsive layout?

[osma]

@joelit Yes, the mobile layout needs further specification. I think most of it can be implemented using the breakpoints you mention. We have a separate epic for it now: #1753 (just a placeholder currently)