fix(fw-select): fixed the padding issue on multi-select (#407)

freshworks · Feb 9, 2022 · f365462 · f365462
1 parent cb85870
commit f365462
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/packages/crayons-core/src/components/select/select.scss b/packages/crayons-core/src/components/select/select.scss
@@ -52,7 +52,7 @@ label {
   width: calc(100% - 10px);
   border: var(--select-border, 1px solid $input-border);
   border-radius: var(--select-border-radius, 4px);
-  padding: 4px 0 4px 10px;
+  padding-left: 10px;
   background-color: $input-bg;
   box-shadow: none;
   min-height: 22px;
@@ -64,8 +64,13 @@ label {
     flex-grow: 1;
     flex-wrap: wrap;
 
-    fw-tag {
-      margin-right: 4px;
+    .tag-container {
+      display: flex;
+      flex-wrap: wrap;
+
+      fw-tag {
+        margin: 4px 4px 4px 0px;
+      }
     }
 
     input {
@@ -80,7 +85,7 @@ label {
       min-height: 22px;
       box-sizing: border-box;
       overflow: hidden;
-      padding: 0px;
+      margin: 4px 0px;
 
       &:focus {
         border: none;

diff --git a/packages/crayons-core/src/components/select/select.tsx b/packages/crayons-core/src/components/select/select.tsx
@@ -607,6 +607,7 @@ export class Select {
                   <div class='input-container-inner'>
                     {this.multiple && (
                       <div
+                        class='tag-container'
                         onFocus={this.focusOnTagContainer}
                         ref={(tagContainer) =>
                           (this.tagContainer = tagContainer)