bug fixes

app/pages/providers/new.vue

@@ -5,10 +5,10 @@ const toast = useToast()
 const { $providers } = useNuxtApp()
 
 const form = ref({
-  name: '', email: '', phone: '', contact_name: '', ruc: '', address: ''
+  provider_id: '', name: '', email: '', phone: '', contact_name: '', ruc: '', address: ''
 })
 
-const isValid = computed(() => form.value.name && form.value.email)
+const isValid = computed(() => form.value.provider_id && form.value.name && form.value.email)
 
 async function submit() {
   submitting.value = true
@@ -45,6 +45,10 @@ async function submit() {
 
       <div class="space-y-4">
         <div class="grid grid-cols-2 gap-4">
+          <UFormField label="Provider ID" required>
+            <UInput v-model="form.provider_id" placeholder="seguros-abc" class="w-full" />
+            <p class="text-xs text-gray-500 mt-1">Alphanumeric identifier (letters and numbers only)</p>
+          </UFormField>
           <UFormField label="Company Name" required class="col-span-2">
             <UInput v-model="form.name" placeholder="Seguros Panama S.A." class="w-full" />
           </UFormField>
@@ -77,3 +81,58 @@ async function submit() {
     </UCard>
   </div>
 </template>
+
+<style scoped>
+/* Prevent width expansion when dropdowns open */
+:deep(.grid) {
+  min-width: 0;
+  width: 100%;
+}
+
+:deep(.UFormField) {
+  min-width: 0;
+  width: 100%;
+}
+
+:deep(.UInput) {
+  min-width: 0;
+  width: 100%;
+}
+
+:deep(.USelect) {
+  min-width: 0;
+  width: 100%;
+}
+
+/* Prevent dropdown menus from expanding container */
+:deep([role="listbox"]) {
+  position: fixed !important;
+  z-index: 50;
+  min-width: 200px;
+  max-width: 300px;
+}
+
+/* Ensure form fields don't cause expansion */
+:deep(.space-y-4) {
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Prevent any element from expanding beyond container */
+:deep(*) {
+  max-width: 100%;
+}
+
+/* Specific fix for dropdown positioning */
+:deep(.USelectMenuPopover) {
+  position: fixed !important;
+  z-index: 100;
+}
+
+/* Ensure form stability */
+:deep(.UCard) {
+  width: 100%;
+  min-width: 0;
+}
+</style>