From 22fa8a2eaff427f70bea75395b6ae51d69207afb Mon Sep 17 00:00:00 2001 From: spaceyuck Date: Wed, 22 Oct 2025 18:41:17 +0200 Subject: [PATCH 1/6] first attempt to get sidebar to use all vertical space It works OK, has a few points thought * collapse / expand animations seem to target original height * the space use is still not efficient, because all open boxes get equal spacing, irregardless of content height * unsure about the :has() pseudo-class, it' pretty newish (2022 / 2023) --- ui/v2.5/src/components/List/styles.scss | 34 +++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/ui/v2.5/src/components/List/styles.scss b/ui/v2.5/src/components/List/styles.scss index c42c43a56..6afda8b17 100644 --- a/ui/v2.5/src/components/List/styles.scss +++ b/ui/v2.5/src/components/List/styles.scss @@ -981,6 +981,9 @@ input[type="range"].zoom-slider { } .sidebar { + display: flex; + flex-direction: column; + // make controls slightly larger on mobile @include media-breakpoint-down(xs) { .btn, @@ -994,6 +997,37 @@ input[type="range"].zoom-slider { margin-bottom: 0.5rem; } + .sidebar-section { + display: flex; + flex-direction: column; + + &:has(.collapse.show) { + flex-grow: 1; + flex-shrink: 1; + } + + > .collapse.show { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + + > .queryable-candidate-list { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + + > ul { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 0; + max-height: max-content; + } + } + } + } + .search-term-input { flex-grow: 1; margin-right: 0; From 311430e814450a75a52937eb47ced811a17ea836 Mon Sep 17 00:00:00 2001 From: spaceyuck Date: Sun, 26 Oct 2025 14:01:54 +0100 Subject: [PATCH 2/6] sidebar dynamic height works for saved filters too --- ui/v2.5/src/components/List/styles.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/v2.5/src/components/List/styles.scss b/ui/v2.5/src/components/List/styles.scss index 6afda8b17..243928492 100644 --- a/ui/v2.5/src/components/List/styles.scss +++ b/ui/v2.5/src/components/List/styles.scss @@ -1012,7 +1012,8 @@ input[type="range"].zoom-slider { flex-grow: 1; flex-shrink: 1; - > .queryable-candidate-list { + > .queryable-candidate-list, + > .sidebar-saved-filter-list-container { display: flex; flex-direction: column; flex-grow: 1; From ac49346a7fe71eb60f18246fedcc82809dbac039 Mon Sep 17 00:00:00 2001 From: spaceyuck Date: Thu, 30 Oct 2025 21:14:15 +0100 Subject: [PATCH 3/6] Revert "sidebar dynamic height works for saved filters too" This reverts commit 6197fdd63e1b880f6c8af43ea3bb32bf22a456d2. --- ui/v2.5/src/components/List/styles.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ui/v2.5/src/components/List/styles.scss b/ui/v2.5/src/components/List/styles.scss index 243928492..6afda8b17 100644 --- a/ui/v2.5/src/components/List/styles.scss +++ b/ui/v2.5/src/components/List/styles.scss @@ -1012,8 +1012,7 @@ input[type="range"].zoom-slider { flex-grow: 1; flex-shrink: 1; - > .queryable-candidate-list, - > .sidebar-saved-filter-list-container { + > .queryable-candidate-list { display: flex; flex-direction: column; flex-grow: 1; From 83a5af2738efd55939f82f1a01424463ee5dc326 Mon Sep 17 00:00:00 2001 From: spaceyuck Date: Thu, 30 Oct 2025 21:14:26 +0100 Subject: [PATCH 4/6] Revert "first attempt to get sidebar to use all vertical space" This reverts commit 725c778d209b338eb547bbc3ae0a60f60e0312b5. --- ui/v2.5/src/components/List/styles.scss | 34 ------------------------- 1 file changed, 34 deletions(-) diff --git a/ui/v2.5/src/components/List/styles.scss b/ui/v2.5/src/components/List/styles.scss index 6afda8b17..c42c43a56 100644 --- a/ui/v2.5/src/components/List/styles.scss +++ b/ui/v2.5/src/components/List/styles.scss @@ -981,9 +981,6 @@ input[type="range"].zoom-slider { } .sidebar { - display: flex; - flex-direction: column; - // make controls slightly larger on mobile @include media-breakpoint-down(xs) { .btn, @@ -997,37 +994,6 @@ input[type="range"].zoom-slider { margin-bottom: 0.5rem; } - .sidebar-section { - display: flex; - flex-direction: column; - - &:has(.collapse.show) { - flex-grow: 1; - flex-shrink: 1; - } - - > .collapse.show { - display: flex; - flex-direction: column; - flex-grow: 1; - flex-shrink: 1; - - > .queryable-candidate-list { - display: flex; - flex-direction: column; - flex-grow: 1; - flex-shrink: 1; - - > ul { - flex-grow: 1; - flex-shrink: 1; - flex-basis: 0; - max-height: max-content; - } - } - } - } - .search-term-input { flex-grow: 1; margin-right: 0; From 91ec37baf2d9a8c339600f8b4f0ba42b363aaf3e Mon Sep 17 00:00:00 2001 From: WithoutPants <53250216+WithoutPants@users.noreply.github.com> Date: Thu, 30 Oct 2025 13:22:32 +1100 Subject: [PATCH 5/6] Remove max-height and sticky sidebar section headers --- ui/v2.5/src/components/List/styles.scss | 6 ++++-- ui/v2.5/src/components/Shared/styles.scss | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/ui/v2.5/src/components/List/styles.scss b/ui/v2.5/src/components/List/styles.scss index c42c43a56..e012a9cd9 100644 --- a/ui/v2.5/src/components/List/styles.scss +++ b/ui/v2.5/src/components/List/styles.scss @@ -213,6 +213,10 @@ input[type="range"].zoom-slider { } } +.sidebar-saved-filter-list-container .saved-filter-list { + max-height: unset; +} + .sidebar-saved-filter-list-container .toolbar { align-items: center; display: flex; @@ -611,8 +615,6 @@ input[type="range"].zoom-slider { .sidebar-list-filter ul { list-style-type: none; margin-bottom: 0.25rem; - max-height: 300px; - overflow-y: auto; // to prevent unnecessary vertical scrollbar padding-bottom: 0.15rem; padding-inline-start: 0; diff --git a/ui/v2.5/src/components/Shared/styles.scss b/ui/v2.5/src/components/Shared/styles.scss index 6ccef5aaf..b28b44971 100644 --- a/ui/v2.5/src/components/Shared/styles.scss +++ b/ui/v2.5/src/components/Shared/styles.scss @@ -859,9 +859,11 @@ button.btn.favorite-button { border-bottom: 1px solid $secondary; .collapse-header { - // background-color: $secondary; - + background-color: $body-bg; padding: 0.25rem; + position: sticky; + top: -0.5rem; + z-index: 1; .collapse-button { font-weight: bold; From b9fe590aa12cacb625b7fb73e57b5a16926c45c2 Mon Sep 17 00:00:00 2001 From: spaceyuck Date: Thu, 30 Oct 2025 22:00:48 +0100 Subject: [PATCH 6/6] sidebar move selected / excluded filter options into collapse header element the goal is to keep selected options visble when scrolling, not just the section header --- ui/v2.5/src/components/Shared/CollapseButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/v2.5/src/components/Shared/CollapseButton.tsx b/ui/v2.5/src/components/Shared/CollapseButton.tsx index d0b192162..b89329c82 100644 --- a/ui/v2.5/src/components/Shared/CollapseButton.tsx +++ b/ui/v2.5/src/components/Shared/CollapseButton.tsx @@ -38,8 +38,8 @@ export const CollapseButton: React.FC> = ( {props.text} + {props.outsideCollapse} - {props.outsideCollapse}
{props.children}