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(( data-qa={qa} title={title} > - {label && {label}} - {showPlaceholder && ( - {placeholder} - )} - {showOptionsText && ( - - {selectedOptionsContent} - - )} +
+ {label && {label}} + {showPlaceholder && ( + {placeholder} + )} + {showOptionsText && ( + + {selectedOptionsContent} + + )} +
{renderCounterComponent()} {renderClearIcon({})}