UX: hide select-kits when the parent element is outside the viewport

If the select-kit header is not in the viewport (scrolled out of view), popper adds a data-popper-reference-hidden attribute.

This PR adds the recommended styles to "hide" the select-kit body when that happens. See

https://popper.js.org/docs/v2/modifiers/hide/

app/assets/stylesheets/common/select-kit/select-kit.scss

@@ -175,6 +175,11 @@
       max-height: 300px;
       overflow-y: auto;
     }
+
+    &[data-popper-reference-hidden] {
+      visibility: hidden;
+      pointer-events: none;
+    }
   }
 
   .select-kit-row {