Merge pull request #1817 from Kajabi/AUD-933/qj-contact-ui-cut-off-sm…

…all-screens fix(dropdown): AUD-933 resolve contact ui dropdown getting cut off on small screens
Kajabi · Oct 18, 2023 · 81e5011 · 81e5011
2 parents aba15f1 + a1ff19c
commit 81e5011
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
@@ -14,6 +14,8 @@ $-dropdown-item-focus-line-spacing-x: sage-spacing(sm);
 $-dropdown-option-menu-size: rem(40px);
 
 $-dropdown-panel-max-height: rem(400px);
+$-dropdown-panel-max-height-small: rem(185px);
+$-dropdown-panel-max-height-breakpoint: 700px;
 
 $-dropdown-trigger-label-color-label-background: map-get($sage-field-colors, label-background);
 $-dropdown-trigger-label-color-default: map-get($sage-field-colors, default);
@@ -286,6 +288,10 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
   .sage-dropdown--page-size & {
     min-width: 100%;
   }
+
+  @media (max-height: $-dropdown-panel-max-height-breakpoint) {
+    max-height: $-dropdown-panel-max-height-small;
+  }
 }
 
 .sage-dropdown__panel {