Finger-friendly styling for multi-select dropdowns

On narrow screens, the dropdown menus created by the multiselect
plugin now display in the centre of the screen, with increased
font size and padding to make them much easier to use.

1 files changed, 27 insertions, 0 deletions

diff --git a/web/cobrands/sass/_multiselect.scss b/web/cobrands/sass/_multiselect.scss
index 9704d841d..3503c6bfd 100644
--- a/web/cobrands/sass/_multiselect.scss
+++ b/web/cobrands/sass/_multiselect.scss
@@ -35,6 +35,33 @@
     }
 }
 
+// Centred, modal display for sub-768px screens only.
+@media (max-width: 47.94em) {
+    .multi-select-menu {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 75% !important; // override inline "width: auto"
+        max-height: 50%;
+        min-width: 0;
+        overflow: auto; // allow scrolling
+        border: none;
+        border-radius: 0.3em;
+        box-shadow: 0 1em 3em rgba(0, 0, 0, 0.4);
+    }
+
+    .multi-select-menuitem {
+        font-size: 1em;
+        padding: flip(1em 2.5em 1em 3.5em, 1em 3.5em 1em 2.5em);
+
+        input {
+            margin-top: 0.15em;
+            margin-#{$left}: -2em;
+        }
+    }
+}
+
 .multi-select-presets {
     border-bottom: 1px solid #ddd;
 }