Fix form field interaction

Author: SebKay

resources/css/forms.css

@@ -1,3 +1,9 @@
+@layer base {
+    label[for] {
+        @apply cursor-pointer;
+    }
+}
+
 @utility form-row {
     @apply grid grid-cols-1 gap-5 sm:gap-7 sm:grid-cols-4;
 }
@@ -23,41 +29,29 @@
 }
 
 @utility field {
-    @apply block rounded-md border-brand-300 shadow-xs hover:ring-3 hover:ring-brand-200/50 focus:border-brand-300 focus:ring-3 focus:ring-brand-200/50 focus:ring-offset-0 transition ease-in-out duration-200;
+    @apply block rounded-md border-brand-300 shadow-xs outline-hidden hover:ring-3 hover:ring-brand-200/50 focus:border-brand-300 focus:ring-3 focus:ring-brand-200/50 focus:ring-offset-0 transition ease-in-out duration-200;
 }
 
 @utility input {
     @apply field block text-base w-full;
 }
 
 @utility textarea {
-    @apply field block text-base w-full;
-    @apply min-h-32;
+    @apply field block text-base w-full min-h-32;
 }
 
 @utility select {
-    @apply field block text-base w-full;
-    @apply cursor-pointer;
+    @apply field block text-base w-full cursor-pointer;
 }
 
 @utility option {
-    @apply field;
-    @apply cursor-pointer size-5 text-brand-800;
+    @apply field cursor-pointer size-5 text-brand-800;
 }
 
 @utility checkbox {
     @apply option;
 }
 
 @utility radio {
-    @apply option;
-    @apply rounded-full;
-}
-
-@layer components {
-    label {
-        &[for] {
-            @apply cursor-pointer;
-        }
-    }
+    @apply option rounded-full;
 }

resources/js/Components/Header.vue

@@ -21,7 +21,7 @@
                                     :method="link?.method"
                                     :as="link?.method == 'post' ? 'button' : 'a'"
                                     v-text="link.label"
-                                    class="rounded-xl px-3 py-2 text-sm font-medium transition-colors ease-in-out duration-200"
+                                    class="rounded-xl px-3 py-2 text-sm font-medium cursor-pointer transition-colors ease-in-out duration-200"
                                     :class="{
                                         'bg-brand-100 text-brand-950': link.components.includes($page.component),
                                         'text-brand-600 hover:text-brand-950 focus:text-brand-950': !link.components.includes($page.component),