Adjust chipsinput styling

src/assets/scss/main.scss

@@ -8,7 +8,7 @@
 //Globals
 
 body {
-  @apply bg-black m-0 select-none;
+  @apply bg-black m-0 select-none overscroll-none;
   -ms-overflow-style: none;
   scrollbar-width: none;
 
@@ -16,8 +16,6 @@ body {
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
-
-  overscroll-behavior: none;
 }
 
 h1,

src/components/forms/ChipsInput.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-wrap items-center border-0 border-b border-solid border-gray-50">
+  <div class="flex flex-wrap items-center input-cyan ">
-    <div v-for="(chip, i) in modelValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1.5 px-2.5 m-1">
+    <div v-for="(chip, i) in modelValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1 px-2">
-      <span>{{ chip }}</span>
+      <span class="text-xs">{{ chip }}</span>
-      <i class="cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
+      <i class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
     </div>
-    <input class="outline-none border-none max-w-[250px] p-1 m-1 text-white" v-model="currentInput" @keypress.enter.prevent="saveChip" @keydown.delete="backspaceDelete" />
+    <input class="outline-none border-none p-1" placeholder="Tag name" v-model="currentInput" @keypress.enter.prevent="saveChip" @keydown.delete="backspaceDelete" />
   </div>
 </template>