fix(select): prevent align issue on small width

ovh · Jul 29, 2024 · 246587d · 246587d
1 parent 3192687
commit 246587d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/packages/ods/src/components/select/src/components/ods-select/ods-select.scss b/packages/ods/src/components/select/src/components/ods-select/ods-select.scss
@@ -15,6 +15,7 @@ $select-padding-right: $select-caret-size + ($select-base-padding * 2);
 }
 
 @mixin ods-select-placeholder() {
+  white-space: nowrap;
   color: var(--ods-color-neutral-600);
 }
 
@@ -128,6 +129,7 @@ $select-padding-right: $select-caret-size + ($select-base-padding * 2);
       @include checkbox.ods-checkbox();
 
       margin-right: 8px;
+      min-width: checkbox.$ods-checkbox-size;
     }
   }
 
@@ -143,6 +145,7 @@ $select-padding-right: $select-caret-size + ($select-base-padding * 2);
       background: $select-background-color;
       cursor: pointer;
       padding: 0;
+      white-space: nowrap;
     }
 
     .ts-merged-items-placeholder {
@@ -159,7 +162,6 @@ $select-padding-right: $select-caret-size + ($select-base-padding * 2);
 
           position: absolute;
           right: 0;
-          transform: translateY(-50%);
           margin: 0;
           border: none;
           background-color: inherit;
@@ -193,6 +195,14 @@ $select-padding-right: $select-caret-size + ($select-base-padding * 2);
       }
     }
 
+    &.single {
+      .ts-control {
+        &::after {
+          transform: translateY(-50%);
+        }
+      }
+    }
+
     &.multi {
       &.plugin-placeholder {
         .ts-placeholder {

diff --git a/packages/ods/src/style/_checkbox.scss b/packages/ods/src/style/_checkbox.scss
@@ -1,6 +1,8 @@
 @use './focus';
 @use './icon';
 
+$ods-checkbox-size: 16px;
+
 @mixin ods-checkbox() {
   appearance: none;
   display: inline-flex;
@@ -11,8 +13,8 @@
   border-radius: var(--ods-border-radius-sm);
   background: var(--ods-color-primary-000);
   cursor: pointer;
-  width: 16px;
-  height: 16px;
+  width: $ods-checkbox-size;
+  height: $ods-checkbox-size;
 
   &::before {
     @include icon.ods-icon();