From 8115a71b722741907c3d904e33da23ca7b6e5176 Mon Sep 17 00:00:00 2001
From: Kirill Revenkov <revenkov-k@yandex-team.ru>
Date: Thu, 4 Jul 2024 11:13:24 +0300
Subject: [PATCH] refactor: css only

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

diff --git a/src/components/Select/components/SelectControl/SelectControl.scss b/src/components/Select/components/SelectControl/SelectControl.scss
index 114193f145..b4c3e13f2a 100644
--- a/src/components/Select/components/SelectControl/SelectControl.scss
+++ b/src/components/Select/components/SelectControl/SelectControl.scss
@@ -116,8 +116,10 @@ $blockButton: '.#{variables.$ns}select-control__button';
         @include mixins.button-reset();
         @include mixins.pin($blockButton, ('::before', '::after'), var(--_--border-radius));
 
-        display: inline-flex;
+        display: inline-grid;
+        grid-template-columns: auto auto;
         align-items: center;
+        justify-content: flex-start;
         overflow: hidden;
         width: 100%;
         height: 100%;
@@ -209,11 +211,6 @@ $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();
diff --git a/src/components/Select/components/SelectControl/SelectControl.tsx b/src/components/Select/components/SelectControl/SelectControl.tsx
index a6641d55d5..d7e0f5248e 100644
--- a/src/components/Select/components/SelectControl/SelectControl.tsx
+++ b/src/components/Select/components/SelectControl/SelectControl.tsx
@@ -190,17 +190,15 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, ControlProps>((
                     data-qa={qa}
                     title={title}
                 >
-                    <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>
+                    {label && <span className={selectControlBlock('label')}>{label}</span>}
+                    {showPlaceholder && (
+                        <span className={selectControlBlock('placeholder')}>{placeholder}</span>
+                    )}
+                    {showOptionsText && (
+                        <span className={selectControlBlock('option-text')}>
+                            {selectedOptionsContent}
+                        </span>
+                    )}
                 </button>
                 {renderCounterComponent()}
                 {renderClearIcon({})}