From 25e16870b94e6f0a2d647a5fe024cad113c92451 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sun, 21 Jul 2024 15:47:31 +0200
Subject: [PATCH] Adjust chipsinput styling

---
 src/assets/scss/main.scss           |  4 +---
 src/components/forms/ChipsInput.vue | 10 +++++-----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 3177c5d..b4ef273 100644
--- a/src/assets/scss/main.scss
+++ b/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,
diff --git a/src/components/forms/ChipsInput.vue b/src/components/forms/ChipsInput.vue
index 06c0019..eed5938 100644
--- a/src/components/forms/ChipsInput.vue
+++ b/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 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">
-      <span>{{ chip }}</span>
-      <i class="cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
+  <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 px-2">
+      <span class="text-xs">{{ chip }}</span>
+      <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>