fix(dropdown): resolve contact ui dropdown getting cut off on small s…

…creens
Kajabi · Oct 16, 2023 · 4082e72 · 4082e72
1 parent ad75aaf
commit 4082e72
Showing 1 changed file with 8 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,12 @@ $-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 {