peoplescollection.wales: Item image can't be seen and text is squeezed too much to the left

[jobbautista9]

I can't see the image for the item in https://www.peoplescollection.wales/items/9729, and the description is difficult to read since it's pushed to the left side of the viewport too much with excessive margins. Tested in a fresh portable of 34.1.0.

Probably relevant output from the devtools web console (link to the common JavaScript file referenced here: https://www.peoplescollection.wales/sit ... YyfvdsrdeQ):

Code: Select all

UV instance created: Object { options: Object, adapter: undefined, _el: <div.uv-iiif-extension-host.en-gb.right-panel-enabled.footer-panel-enabled.uv-openseadragon-extension.browser-Firefox.browser-version-128.fullscreen-supported>, contentType: "iiifManifestId", _contentType: "iiifManifestId", _externalEventListeners: Array[7], _assignedContentHandler: Object, assignedContentHandler: Object }
js_84XpE6Em1zVNwVKc0gU88tqsR81DLfTS-szDqbFtIX4.js:2:863

Universal Viewer created for manifest: /iiif/manifest/9729
js_84XpE6Em1zVNwVKc0gU88tqsR81DLfTS-szDqbFtIX4.js:2:2132

Base config loaded: Object { options: Object, modules: Object, localisation: Object, content: Object }
js_84XpE6Em1zVNwVKc0gU88tqsR81DLfTS-szDqbFtIX4.js:2:1070

Config after data-config merge: Object { options: Object, modules: Object, localisation: Object, content: Object }
js_84XpE6Em1zVNwVKc0gU88tqsR81DLfTS-szDqbFtIX4.js:2:1179

Drupal config from settings: Object { options: Object }
js_84XpE6Em1zVNwVKc0gU88tqsR81DLfTS-szDqbFtIX4.js:2:1304

Final UV config after all merges: Object { options: Object, modules: Object, localisation: Object, content: Object }
js_84XpE6Em1zVNwVKc0gU88tqsR81DLfTS-szDqbFtIX4.js:2:1427

[vannilla]

It might be something about disply: grid. It's not the first website I see this happens, but it's all set up by some framework and the CSS rules for the grid layout are rather complex that reverse engineering the intended behaviour is rather difficult.

[adoxa]

It seems grid-column does not recognise the start / end short form (plus it uses nested CSS, and there are errors in it so my Denest extension wouldn't work). Here's a Modify HTTP Response filter to work around all that (it will work without Denest, but you may need to restart, so MHR applies before Denest; if it denested the top "Cymraeg" button gets a border). There's still an issue that the image doesn't center and it will probably break on a site update (just removing _62H from the path may be enough).

Code: Select all

[["www.peoplescollection.wales",["/css_62H/",["0.8em;//","","/fl\\s/","","/grid-column:(calc\\(\\(var\\(--anrt-grid-columns\\) - var\\(--anrt-grid-col-span\\)\\) \\/ 2 \\+ 1\\)) \\/ (span var\\(--anrt-grid-col-span\\))/g","grid-column-start:$1;grid-column-end:$2"]]]]