fix(front): tagInput fixes

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

src/assets/oruga-tailwindcss.css

@@ -149,6 +149,12 @@ body {
 .taginput-autocomplete {
   @apply flex-1 !drop-shadow-none;
 }
+.taginput-expanded {
+  @apply w-full;
+}
+.taginput .autocomplete .dropdown-menu {
+  @apply w-full;
+}
 .taginput-container {
   @apply border-none;
 }
@@ -166,7 +172,7 @@ body {
 }
 
 .autocomplete .autocomplete-item {
-  @apply text-start p-0;
+  @apply text-start p-2;
 }
 
 .autocomplete .autocomplete-item-group-title {
@@ -182,7 +188,7 @@ body {
   @apply bg-white dark:bg-zinc-700 shadow-lg rounded text-start py-2;
 }
 .dropdown-item {
-  @apply relative inline-flex gap-1 no-underline p-2 cursor-pointer w-full;
+  @apply relative inline-flex gap-1 no-underline p-2 cursor-pointer w-full hover:bg-[#f5f5f5] hover:text-black;
 }
 
 .dropdown-item-active {
@@ -353,7 +359,7 @@ button.menubar__button {
   @apply z-50;
 }
 .datepicker-box {
-  @apply block px-4 py-1;
+  @apply block px-4 py-1 hover:bg-transparent;
 }
 .o-dpck__header {
   @apply pb-2 mb-2;

src/components/Event/TagInput.vue

@@ -26,6 +26,7 @@
       @input="getFilteredTags"
       :id="id"
       dir="auto"
+      expanded
     >
     </o-taginput>
   </o-field>

src/oruga-config.ts

@@ -28,8 +28,10 @@ export const orugaConfig = {
     itemClass: "taginput-item",
     rootClass: "taginput",
     containerClass: "taginput-container",
+    expandedClass: "taginput-expanded",
     autocompleteClasses: {
       rootClass: "taginput-autocomplete",
+      itemClass: "taginput-autocomplete-item",
       inputClasses: {
         rootClass: "taginput-input-wrapper",
         inputClass: "taginput-input",