fix: remove column gap and leave it to be customizable by user (#270)

- add a CSS/SASS variable instead to make it customizable

Author: ghiscoding

packages/multiple-select-vanilla/src/styles/_variables.scss

@@ -68,6 +68,7 @@ $ms-drop-scrollbar-color: #c1c1c1 #f1f1f1 !default;
 $ms-drop-zindex: 1050 !default;
 $ms-input-focus-outline: none !default;
 $ms-infinite-empty-option-height: 20px !default;
+$ms-label-column-gap: 0 !default;
 $ms-label-margin-bottom: 0 !default;
 $ms-label-min-height: 1.25rem !default;
 $ms-label-padding: 0 0 0 2px !default;

packages/multiple-select-vanilla/src/styles/multiple-select.scss

@@ -62,7 +62,7 @@
       & + span {
         display: inline-flex;
         align-items: center;
-        column-gap: 4px;
+        column-gap: var(--ms-label-column-gap, $ms-label-column-gap);
         padding-left: var(--ms-label-text-padding-left, $ms-label-text-padding-left);
       }
     }
@@ -127,10 +127,10 @@
       display: flex;
       flex: 1;
       align-items: center;
-      column-gap: 4px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      column-gap: var(--ms-label-column-gap, $ms-label-column-gap);
 
       &.ms-placeholder {
         color: var(--ms-placeholder-color, $ms-placeholder-color);