tweaks

src/components/form/base/Select.vue

@@ -107,7 +107,7 @@ const inputClass = computed(() => {
       ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
       : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500',
     `block w-full rounded-md shadow-sm sm:text-sm transition-colors duration-200`,
-    'py-2 pl-3 pr-10 text-left cursor-default h-[38px] border-[1px]',
+    'py-2 pl-3 pr-10 text-left cursor-default h-[38px] border-[1px] focus:ring-1',
   ];
 });
 

src/components/form/fields/FormSelectField.vue

@@ -5,7 +5,7 @@
     :placeholder="placeholder"
     :disabled="disabled"
   >
-    <template #input="{ invalid, value, setValue }">
+    <template #input="{ invalid, forId, value, setValue }">
       <SelectVue
         :for-id="forId"
         :invalid="invalid"
@@ -26,7 +26,6 @@ import SelectVue, { SelectOption } from '../base/Select.vue';
 
 const props = withDefaults(
   defineProps<{
-    forId?: string;
     label: string;
     name: string;
     options: SelectOption[];

src/components/item/StoredItemCard.vue

@@ -30,10 +30,12 @@
         </div>
         <div
           :class="`flex items-center space-x-1 ${fontSize} text-gray-500`"
-          title="Type"
+          :title="`${ItemTypeName[storedItem.item.type]} - ${
+            ItemTypeDescription[storedItem.item.type]
+          }`"
         >
           <InformationCircleIcon class="h-4 w-4" />
-          <span>{{ storedItem.item.type }}</span>
+          <span>{{ ItemTypeName[storedItem.item.type] }}</span>
           <span v-if="storedItem.item.consumable">· Consumable</span>
           <span v-if="storedItem.consumedAt"
             >· Consumed at {{ dateToLocaleString(storedItem.consumedAt) }}</span
@@ -79,6 +81,7 @@ import {
   QrCodeIcon,
 } from '@heroicons/vue/24/outline';
 import { computed } from 'vue';
+import { ItemTypeDescription, ItemTypeName } from '../../enums/item-type.enum';
 import { StoredItem } from '../../interfaces/storage.interfaces';
 
 const props = defineProps<{