From 0e39cd42829e6b833482c55c23fc48f3cf9431ea Mon Sep 17 00:00:00 2001
From: Kirill Revenkov <revenkov-k@yandex-team.ru>
Date: Wed, 3 Jul 2024 20:20:34 +0300
Subject: [PATCH] feat: new css for select controls

---
 .../SelectControl/SelectControl.scss          |  8 +++++---
 .../SelectControl/SelectControl.tsx           | 20 ++++++++++---------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/Select/components/SelectControl/SelectControl.scss b/src/components/Select/components/SelectControl/SelectControl.scss
index 8fae1ea32f..114193f145 100644
--- a/src/components/Select/components/SelectControl/SelectControl.scss
+++ b/src/components/Select/components/SelectControl/SelectControl.scss
@@ -209,14 +209,16 @@ $blockButton: '.#{variables.$ns}select-control__button';
         transform: scale(0.96);
     }
 
+    &__content-container {
+        display: grid;
+        grid-template-columns: auto auto;
+    }
+
     &__label {
         @include mixins.text-accent;
         @include mixins.overflow-ellipsis();
 
-        flex-shrink: 0;
-        max-width: 50%;
         margin-inline-end: 4px;
-        white-space: nowrap;
     }
 
     &__placeholder,
diff --git a/src/components/Select/components/SelectControl/SelectControl.tsx b/src/components/Select/components/SelectControl/SelectControl.tsx
index d7e0f5248e..a6641d55d5 100644
--- a/src/components/Select/components/SelectControl/SelectControl.tsx
+++ b/src/components/Select/components/SelectControl/SelectControl.tsx
@@ -190,15 +190,17 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, ControlProps>((
                     data-qa={qa}
                     title={title}
                 >
-                    {label && <span className={selectControlBlock('label')}>{label}</span>}
-                    {showPlaceholder && (
-                        <span className={selectControlBlock('placeholder')}>{placeholder}</span>
-                    )}
-                    {showOptionsText && (
-                        <span className={selectControlBlock('option-text')}>
-                            {selectedOptionsContent}
-                        </span>
-                    )}
+                    <div className={selectControlBlock('content-container')}>
+                        {label && <span className={selectControlBlock('label')}>{label}</span>}
+                        {showPlaceholder && (
+                            <span className={selectControlBlock('placeholder')}>{placeholder}</span>
+                        )}
+                        {showOptionsText && (
+                            <span className={selectControlBlock('option-text')}>
+                                {selectedOptionsContent}
+                            </span>
+                        )}
+                    </div>
                 </button>
                 {renderCounterComponent()}
                 {renderClearIcon({})}