Merge pull request #2936 from SUI-Components/select-arrow-overlapping-values

feat(components/molecule/select): select arrow overlaps the input value

Author: andresin87

components/molecule/select/src/styles/index.scss

@@ -23,6 +23,16 @@ $class-select-atom-search-container: '#{$class-select-atom-search}-container';
       border-radius: $bdrs-select;
     }
   }
+  #{$class-select-atom-input-input} {
+    padding-right: $pr-atom-input + -$mr-select-list-arrow + $w-select-list-arrow;
+  }
+  #{$class-select-atom-input-tags} {
+    padding-right: $pr-select-atom-input-tags + -$mr-select-list-arrow + $w-select-list-arrow;
+    padding-left: $pl-atom-input;
+    #{$class-select-atom-input-input} {
+      padding-right: 0;
+    }
+  }
 
   &.is-disabled {
     cursor: default;

components/molecule/select/src/styles/settings.scss

@@ -2,7 +2,7 @@ $bd-select: $bdw-s solid transparent !default;
 $bdrs-select: $bdrs-atom-input !default;
 $z-select-list: $z-navigation !default;
 $mr-select-list-arrow: -$p-l !default;
-$pr-select-atom-input-tags: $p-xxl !default;
+$pr-select-atom-input-tags: $pr-atom-input !default;
 $w-select-list-arrow: $sz-icon-m !default;
 $h-select-list-arrow: $sz-icon-m !default;
 $c-select-list-arrow-fill: initial !default;