fix tooltips, modals, and dropdown menus breaking out of the viewport due to no max-width property

Author: george

src/scss/_config.scss

@@ -666,6 +666,7 @@ $modal-container-border-radius: $global-border-radius !default;
 $modal-container-padding: $global-space !default;
 $modal-container-width: em(450px) !default;
 $modal-container-width-small: 95% !default;
+$modal-container-max-width: 95vw !default;
 $modal-container-margin: 40px auto !default;
 $modal-container-margin-small: $global-space auto !default;
 
@@ -717,6 +718,7 @@ $dropdown-menu-padding: 8px 0 !default;
 $dropdown-menu-border-radius: $global-border-radius !default;
 $dropdown-menu-background-color: $white !default;
 $dropdown-menu-width: em(200px) !default;
+$dropdown-menu-max-width: 95vw !default;
 $dropdown-menu-border: 1px solid $dropdown-border-color !default;
 
 $dropdown-arrow-offset: 12px !default;

src/scss/components/_dropdown.scss

@@ -36,6 +36,7 @@
     border-radius: $dropdown-menu-border-radius;
     background: $dropdown-menu-background-color;
     width: $dropdown-menu-width;
+    max-width: $dropdown-menu-max-width;
     border: $dropdown-menu-border;
     z-index: $dropdown-menu-index;
 

src/scss/components/_modal.scss

@@ -30,6 +30,7 @@
   .modal-dialog {
     background: $modal-container-background-color;
     width: $modal-container-width-small;
+    max-width: $modal-container-max-width;
     position: relative;
     flex-flow: column nowrap;
     display: flex;