From bad210810e3995fb5f741a98287b56619f247567 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Wed, 11 Dec 2024 12:08:51 +0200 Subject: [PATCH 1/5] fix: multiselectMenu and Multiselect height --- src/common/Multiselect/styles.less | 4 ++++ src/common/MultiselectMenu/Dropdown/Dropdown.less | 12 +++--------- src/routes/MetaDetails/StreamsList/styles.less | 1 - .../MetaDetails/VideosList/SeasonsBar/styles.less | 7 ------- 4 files changed, 7 insertions(+), 17 deletions(-) diff --git a/src/common/Multiselect/styles.less b/src/common/Multiselect/styles.less index b82fd06c5..4de3d7e25 100644 --- a/src/common/Multiselect/styles.less +++ b/src/common/Multiselect/styles.less @@ -7,6 +7,8 @@ popup-menu-container: menu-container; } +@parent-height: 6rem; + .label-container { display: flex; flex-direction: row; @@ -48,6 +50,8 @@ .modal-container, .popup-menu-container { .menu-container { + max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height); + .option-container { display: flex; flex-direction: row; diff --git a/src/common/MultiselectMenu/Dropdown/Dropdown.less b/src/common/MultiselectMenu/Dropdown/Dropdown.less index 57840ca22..2eea0449b 100644 --- a/src/common/MultiselectMenu/Dropdown/Dropdown.less +++ b/src/common/MultiselectMenu/Dropdown/Dropdown.less @@ -2,6 +2,8 @@ @import (reference) '~stremio/common/screen-sizes.less'; +@parent-height: 6rem; + .dropdown { background: var(--modal-background-color); display: none; @@ -16,7 +18,7 @@ &.open { display: block; - max-height: calc(3.2rem * 10); + max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height); overflow: auto; } @@ -31,12 +33,4 @@ width: 1.5rem; } } -} - -@media only screen and (max-width: @minimum) { - .dropdown { - &.open { - max-height: calc(3.2rem * 7); - } - } } \ No newline at end of file diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less index c22b14071..7ada03719 100644 --- a/src/routes/MetaDetails/StreamsList/styles.less +++ b/src/routes/MetaDetails/StreamsList/styles.less @@ -124,7 +124,6 @@ } .multiselect-menu-container { - max-height: calc(3.2rem * 7); overflow: auto; } } diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less index f030385b4..20f6f05ab 100644 --- a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less +++ b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less @@ -77,7 +77,6 @@ } .multiselect-menu-container { - max-height: calc(3.2rem * 7); overflow: auto; } } @@ -86,11 +85,5 @@ @media only screen and (max-width: @minimum) { .seasons-bar-container { height: 6rem; - - .seasons-popup-label-container { - .multiselect-menu-container { - max-height: calc(3.2rem * 3); - } - } } } \ No newline at end of file From df07ca51b0bb59cc6164792f0b032a37852621a9 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Wed, 11 Dec 2024 12:26:40 +0200 Subject: [PATCH 2/5] refactor: sizes of the menu-container --- src/common/Multiselect/styles.less | 12 ++++++++++-- src/common/MultiselectMenu/Dropdown/Dropdown.less | 12 ++++++++++-- src/routes/Addons/styles.less | 1 - src/routes/Discover/styles.less | 3 +-- 4 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/common/Multiselect/styles.less b/src/common/Multiselect/styles.less index 4de3d7e25..cfb0c3234 100644 --- a/src/common/Multiselect/styles.less +++ b/src/common/Multiselect/styles.less @@ -7,7 +7,7 @@ popup-menu-container: menu-container; } -@parent-height: 6rem; +@parent-height: 10rem; .label-container { display: flex; @@ -50,7 +50,7 @@ .modal-container, .popup-menu-container { .menu-container { - max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height); + max-height: calc(3.2rem * 7); .option-container { display: flex; @@ -105,4 +105,12 @@ } } } +} + +@media (orientation: landscape) and (max-width: @xsmall) { + .modal-container, .popup-menu-container { + .menu-container { + max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height); + } + } } \ No newline at end of file diff --git a/src/common/MultiselectMenu/Dropdown/Dropdown.less b/src/common/MultiselectMenu/Dropdown/Dropdown.less index 2eea0449b..3bea17d22 100644 --- a/src/common/MultiselectMenu/Dropdown/Dropdown.less +++ b/src/common/MultiselectMenu/Dropdown/Dropdown.less @@ -2,7 +2,7 @@ @import (reference) '~stremio/common/screen-sizes.less'; -@parent-height: 6rem; +@parent-height: 10rem; .dropdown { background: var(--modal-background-color); @@ -18,7 +18,7 @@ &.open { display: block; - max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height); + max-height: calc(3.3rem * 7); overflow: auto; } @@ -33,4 +33,12 @@ width: 1.5rem; } } +} + +@media (orientation: landscape) and (max-width: @xsmall) { + .dropdown { + &.open { + max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height); + } + } } \ No newline at end of file diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index 10df2eb41..1145ad16a 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -89,7 +89,6 @@ margin-right: 1.5rem; .multiselect-menu-container { - max-height: calc(3.2rem * 7); overflow: auto; } } diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 3af4ddce9..9f7969702 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -57,7 +57,6 @@ } .multiselect-menu-container { - max-height: calc(3.2rem * 7); overflow: auto; } } @@ -220,7 +219,7 @@ } .multiselect-menu-container { - max-height: calc(3.2rem * 4); + max-height: calc(3.2rem * 3); overflow: auto; } } From 2097b0c5d419e21d2b36ab6ac59e487af923a8fe Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Wed, 11 Dec 2024 12:33:56 +0200 Subject: [PATCH 3/5] fix: dropdowns were not visible in pop-up --- src/common/ModalDialog/styles.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less index bde17932d..ce03cfa84 100644 --- a/src/common/ModalDialog/styles.less +++ b/src/common/ModalDialog/styles.less @@ -82,7 +82,7 @@ .body-container { flex: 1; align-self: stretch; - overflow-y: auto; + overflow: visible; padding: 2rem 0; &:last-child { From 303d26e49b4195831993a5deb90eee941a32d145 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Thu, 12 Dec 2024 13:15:24 +0200 Subject: [PATCH 4/5] fix: library bug --- src/routes/Library/styles.less | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 811d97197..9bdd49d4a 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -42,7 +42,6 @@ } .multiselect-menu-container { - max-height: calc(3.2rem * 7); overflow: auto; } } From c2dc38177696dd833814c1d1e5e445282b45f449 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Thu, 12 Dec 2024 13:20:44 +0200 Subject: [PATCH 5/5] fix: overflow on the container filter addons --- src/routes/Addons/styles.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index 1145ad16a..8060e23b8 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -155,6 +155,10 @@ .select-input-container { height: 3rem; + .multiselect-menu-container { + overflow: auto; + } + &:not(:last-child) { margin-bottom: 1rem; }