fix(datepicker): adjust dropdown modal size overrides

oruga-ui · Sep 5, 2024 · 330d3f8 · 330d3f8
1 parent 34ed299
commit 330d3f8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/src/assets/scss/components/_datepicker.scss b/src/assets/scss/components/_datepicker.scss
@@ -16,7 +16,8 @@ $datepicker-month-width: 20rem !default;
 $datepicker-month-cell-spacer: calc($spacer * 0.5) !default;
 $datepicker-month-cell-height: 2.5rem !default;
 $datepicker-dropdown-width: calc(100vw - 40px) !default;
-$datepicker-dropdown-max-width: 460px !default;
+$datepicker-dropdown-min-width: 380px !default;
+$datepicker-dropdown-max-width: 420px !default;
 /* @docs */
 
 .datepicker {
@@ -235,8 +236,9 @@ $datepicker-dropdown-max-width: 460px !default;
   }
 
   // modal size adjustments
-  .dropdown.dropdown-modal > .dropdown-menu {
+  &.dropdown.dropdown-modal > .dropdown-menu {
     --#{$prefix}dropdown-width: #{$datepicker-dropdown-width};
+    --#{$prefix}dropdown-min-width: #{$datepicker-dropdown-min-width};
     --#{$prefix}dropdown-max-width: #{$datepicker-dropdown-max-width};
   }
 

diff --git a/src/assets/scss/components/_dropdown.scss b/src/assets/scss/components/_dropdown.scss
@@ -162,16 +162,18 @@ $dropdown-modal-backdrop-zindex: $zindex-modal-backdrop !default;
   &.dropdown-modal {
     .dropdown-menu {
       --#{$prefix}dropdown-width: 75%;
-      --#{$prefix}dropdown-min-width: 50%;
+      --#{$prefix}dropdown-min-width: 25%;
       --#{$prefix}dropdown-max-width: 90%;
       --#{$prefix}dropdown-zindex: #{$dropdown-modal-menu-zindex};
 
       position: fixed;
       top: 25%;
       left: 50%;
-      width: var(--#{$prefix}dropdown-width);
-      max-width: var(--#{$prefix}dropdown-max-width);
-      min-width: var(--#{$prefix}dropdown-min-width);
+      width: clamp(
+        var(--#{$prefix}dropdown-min-width),
+        var(--#{$prefix}dropdown-width),
+        var(--#{$prefix}dropdown-max-width)
+      );
       transform: translate3d(-50%, -25%, 0);
       z-index: var(--#{$prefix}dropdown-zindex);
     }