Merge pull request #742 from Stremio/fix/multiselect-menu-height

fix: multiselectMenu and Multiselect height

Author: tymmesyde

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 {

src/common/Multiselect/styles.less

@@ -7,6 +7,8 @@
     popup-menu-container: menu-container;
 }
 
+@parent-height: 10rem;
+
 .label-container {
     display: flex;
     flex-direction: row;
@@ -48,6 +50,8 @@
 
 .modal-container, .popup-menu-container {
     .menu-container {
+        max-height: calc(3.2rem * 7);
+
         .option-container {
             display: flex;
             flex-direction: row;
@@ -101,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);
+        }
+    }
 }

src/common/MultiselectMenu/Dropdown/Dropdown.less

@@ -2,6 +2,8 @@
 
 @import (reference) '~stremio/common/screen-sizes.less';
 
+@parent-height: 10rem;
+
 .dropdown {
     background: var(--modal-background-color);
     display: none;
@@ -16,7 +18,7 @@
 
     &.open {
         display: block;
-        max-height: calc(3.2rem * 10);
+        max-height: calc(3.3rem * 7);
         overflow: auto;
     }
 
@@ -33,10 +35,10 @@
     }
 }
 
-@media only screen and (max-width: @minimum) {
+@media (orientation: landscape) and (max-width: @xsmall) {
     .dropdown {
         &.open {
-            max-height: calc(3.2rem * 7);
+            max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height);
         }
     }
 }

src/routes/Addons/styles.less

@@ -89,7 +89,6 @@
                 margin-right: 1.5rem;
 
                 .multiselect-menu-container {
-                    max-height: calc(3.2rem * 7);
                     overflow: auto;
                 }
             }
@@ -156,6 +155,10 @@
             .select-input-container {
                 height: 3rem;
 
+                .multiselect-menu-container {
+                    overflow: auto;
+                }
+
                 &:not(:last-child) {
                     margin-bottom: 1rem;
                 }

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;
                 }
             }

src/routes/Library/styles.less

@@ -42,7 +42,6 @@
                 }
 
                 .multiselect-menu-container {
-                    max-height: calc(3.2rem * 7);
                     overflow: auto;
                 }
             }

src/routes/MetaDetails/StreamsList/styles.less

@@ -124,7 +124,6 @@
             }
 
             .multiselect-menu-container {
-                max-height: calc(3.2rem * 7);
                 overflow: auto;
             }
         }

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);
-            }
-        }
     }
 }