From a89b8a32869b5a66f65de3cfef9ad550a8fa11b0 Mon Sep 17 00:00:00 2001 From: Jake Deery Date: Thu, 29 May 2025 14:21:28 +0100 Subject: [PATCH] Bug 39475: Fixed reflow issues in dropdown menus This patch aims to fix reflow issues present in dropdown menus, by specifying text-wrap behaviour, and by reducing line-height values in some places to make dropdown items more distinguishable from each other. To test: a) log in to the opac b) create a list with an excessively long name (I chose 'a list about New New New New New New New New New New New New New New New New York') c) open the lists menu in the navbar, zoom in to 400% -) notice how the title of the list rolls off the page -) exit the dropdown menu d) open the user menu in the navbar, zoom in to 400% -) notice how the clear searches button has broken across two lines -) zoom back to 100% APPLY PATCH e) repeat step c -) notice how the title of the list now wraps at the designated width -) zoom back to 100% -) notice how the text is still wrapping, and the dropdown menu is no excessively wide f) repeat step d -) notice how the clear searches button now sits on its own line -) zoom back to 100% -) notice how the clear searches button returns to its usual location g) check other dropdowns for clear bugs -) places i could find were on opac-results and opac-details SIGN OFF --- koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss | 9 +++++++-- .../opac-tmpl/bootstrap/css/src/_responsive.scss | 13 +++++++++++++ .../opac-tmpl/bootstrap/css/src/_variables.scss | 2 +- koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 11 ++++++++--- 4 files changed, 29 insertions(+), 6 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss index 0782aa0ad25..13dce351c7c 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss @@ -1442,8 +1442,13 @@ button { } } -.dropdown-item:active { - background-color: $links; +.dropdown-item { + line-height: 1.2; + text-wrap: stable; + + &:active { + background-color: $links; + } } #koha_url { diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index c0eb207a7cb..ec567fee4b0 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -438,6 +438,15 @@ } } + #loggedinuser-menu { + .divider-vertical { + display: inline; + border: 1px solid #EEE; + border-right-color: #FCF9FC; + margin: 5px 2px; + } + } + #didyoumean { margin: .5em 0; } @@ -458,6 +467,10 @@ } } + .dropdown-menu { + min-width: calc( var( --bs-dropdown-min-width ) + 4rem ); + } + a { &.menu-collapse-toggle { &:link, diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_variables.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_variables.scss index a13d77991cb..7e86e1a5667 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_variables.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_variables.scss @@ -1209,7 +1209,7 @@ $navbar-dark-brand-hover-color: $navbar-dark-active-color; // Dropdown menu container and contents. // scss-docs-start dropdown-variables -$dropdown-min-width: 10rem; +$dropdown-min-width: 12rem; // 10rem; $dropdown-padding-x: 0; $dropdown-padding-y: .5rem; $dropdown-spacer: .125rem; diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index 5f182f644ab..e00745fc32b 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -368,11 +368,13 @@ th { } #loggedinuser-menu { - min-width: 300px; + line-height: 1.2; padding: .5em 1em; .divider-vertical { - margin: 5px 5px; + display: block; + border: none; + margin: 0; } } @@ -1103,7 +1105,10 @@ fieldset { a:hover, button { font-size: .9rem; - white-space: nowrap; + + &:not(.dropdown-item) { + white-space: nowrap; + } } label { -- 2.39.5 (Apple Git-154)