From 11dd537feaa230133f8051fd6c370e6e3ec7d54f Mon Sep 17 00:00:00 2001
From: Valerii Sidorenko <balepas@nebius.com>
Date: Wed, 20 Nov 2024 13:35:36 +0100
Subject: [PATCH] fix(Select): do not reserve space for clear if empty (#1956)

---
 .../components/SelectClear/SelectClear.scss   |  1 +
 .../SelectControl/SelectControl.scss          | 25 +++----------------
 2 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/src/components/Select/components/SelectClear/SelectClear.scss b/src/components/Select/components/SelectClear/SelectClear.scss
index 3949b639ad..dc844d6a5a 100644
--- a/src/components/Select/components/SelectClear/SelectClear.scss
+++ b/src/components/Select/components/SelectClear/SelectClear.scss
@@ -10,6 +10,7 @@ $block: '.#{variables.$ns}select-clear';
     align-items: center;
     margin-inline-start: auto;
     z-index: 1;
+    flex-shrink: 0;
 
     &:focus-visible {
         border: 1px solid var(--g-color-line-generic-active);
diff --git a/src/components/Select/components/SelectControl/SelectControl.scss b/src/components/Select/components/SelectControl/SelectControl.scss
index 8fae1ea32f..006da7d381 100644
--- a/src/components/Select/components/SelectControl/SelectControl.scss
+++ b/src/components/Select/components/SelectControl/SelectControl.scss
@@ -48,22 +48,6 @@ $blockButton: '.#{variables.$ns}select-control__button';
     }
 }
 
-@mixin block_clear_reserved_width() {
-    // reserving place for clear icon to fix width changing on displaying clear
-    #{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_s & {
-        padding-inline-end: calc(#{variables.$s-height} + var(--_--text-right-padding));
-    }
-    #{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_m & {
-        padding-inline-end: calc(#{variables.$m-height} + var(--_--text-right-padding));
-    }
-    #{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_l & {
-        padding-inline-end: calc(#{variables.$l-height} + var(--_--text-right-padding));
-    }
-    #{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_xl & {
-        padding-inline-end: calc(#{variables.$xl-height} + var(--_--text-right-padding));
-    }
-}
-
 @mixin block_clear_reserved_disabled_width() {
     // reserving place for clear icon to fix width changing on displaying clear for disabled select
     #{$block}_has-clear#{$block}_size_s #{$blockButton}_disabled & {
@@ -222,17 +206,16 @@ $blockButton: '.#{variables.$ns}select-control__button';
     &__placeholder,
     &__option-text {
         @include mixins.overflow-ellipsis();
-        @include block_clear_reserved_disabled_width();
 
         padding-inline-end: var(--_--text-right-padding);
     }
 
+    &__option-text {
+        @include block_clear_reserved_disabled_width();
+    }
+
     &__placeholder {
         color: var(--g-color-text-hint);
-
-        #{$blockButton}:not(#{$blockButton}_disabled) & {
-            @include block_clear_reserved_width();
-        }
     }
 
     &__chevron-icon {