From 7945af07ce4c42a634ba49633e0508c9e3b3a363 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Mon, 16 Oct 2023 12:24:39 -0500 Subject: [PATCH 1/2] fix(dropdown): resolve contact ui dropdown getting cut off on small screens --- .../sage-assets/lib/stylesheets/components/_dropdown.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss index 6fe7ff6380..7db1c8135c 100644 --- 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 { From a1ff19c85271e30b4974b75db1c382f723b3da57 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Mon, 16 Oct 2023 14:17:13 -0500 Subject: [PATCH 2/2] fix(dropdown): remove unnecessary duplicate selector --- .../sage-assets/lib/stylesheets/components/_dropdown.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss index 7db1c8135c..07dc8c8db9 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss @@ -290,9 +290,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); } @media (max-height: $-dropdown-panel-max-height-breakpoint) { - & { - max-height: $-dropdown-panel-max-height-small; - } + max-height: $-dropdown-panel-max-height-small; } }