From ce1c17786ce67c9d0d000b7b146a9cd41de6dc2f 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 Signed-off-by: David Nind --- 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 0782aa0ad2..13dce351c7 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 c0eb207a7c..ec567fee4b 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 a13d77991c..7e86e1a566 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 5f182f644a..e00745fc32 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