Concept page mappings: style and visibility fixes

[osma]

Reasons for creating this PR

The layout and styling of concept mappings was wrong after opening the vocabulary home page and clicking on links that perform a partial page load. Also, when switching between concepts, the mappings didn't update immediately, so the wrong (stale) set of mappings could be shown.

This PR addresses the above problems by adjusting the template structure of the concept-mappings Vue component and making the display of the div element with the actual mappings conditional on the existence of mappings.

Link to relevant issue(s), if any

• part of Epic: Concept Page #1484

Description of the changes in this PR

• make the display of the mappings div conditional on the existence of mappings (using a computed value for clarity)
• when switching between concepts, clear the old mappings before starting to load new ones so that stale information is not displayed
• adjust CSS classes of the concept-mappings component

Known problems or uncertainties in this PR

• This PR is built on top of PR implement fetchWithAbort and use it for partial page load, mappings & alphabetical index #1609 and includes the commits from that PR, so that should be merged first.
• Should there be Cypress tests specific to these changes or are the existing tests enough?
• There is now an extra useless div in the DOM structure. I couldn't figure out how to avoid it. I tried changing it to template instead in the Vue template, but it just ended up in the DOM as <template> and broke the functionality.

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.58%. Comparing base (f22c504) to head (3e66b74).
Report is 5 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##               main    #1613   +/-   ##
=========================================
  Coverage     70.58%   70.58%           
  Complexity     1647     1647           
=========================================
  Files            32       32           
  Lines          4321     4321           
=========================================
  Hits           3050     3050           
  Misses         1271     1271           

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

[UnniKohonen]

Looks good to me! Some kind of indication that the mappings are being loaded could be added but not necessarily in this PR.

There is also a very minor issue with the mappings variable but it doesn't affect functionality.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[osma]

Fixed the mappings initialization and added the spinner to the TODO list in the conccept page issue. Merging this now.