From 1af62b52724075953146b1e7980c956e4843181e Mon Sep 17 00:00:00 2001 From: Andreas Roussos Date: Fri, 19 Jan 2024 08:39:30 +0000 Subject: [PATCH] Bug 25267: (follow-up) Prevent OPAC sidebar overlap At viewports between approx. 1040 and 1120 pixels wide, the rightmost item in the shelf browser is shown outside of the Holdings frame and its cover image and title hyperlinks are inoperable. This patch fixes that by preventing the OPAC sidebar CSS Flex item (.col-lg-3 class) from extending itself vertically all the way to the bottom of the parent .row class container, thus overlapping the protruding shelf browser Flex item (.col-lg-9 class) due to the stacking order. Test plan: Apply the patch, rebuild the OPAC CSS and check whether the cover image and title hyperlinks for the rightmost (7th) shelf browser item work at various browser widths. Thanks-to: https://stackoverflow.com/a/40156422 --- koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index a728f306a1..d7c81f0b64 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -2352,6 +2352,18 @@ nav { } } +/* + * The following prevents the OPAC sidebar from overlapping the + * rightmost shelf browser item if the web browser has a narrow + * viewport width. + * + * This fix is based on the following Stack Overflow answer: + * https://stackoverflow.com/a/40156422 + */ +#opac-detail > #wrapper > .main > .container-fluid > .row > .col-lg-3 { + align-self: flex-start; +} + #holds { margin: 0 auto; max-width: 800px; -- 2.30.2