bug fixes

app/pages/quotes/new.vue

@@ -276,7 +276,7 @@ async function submitQuote() {
           legal_rep_document: form.customerSelection.selectedBuyer.legal_rep_document_id
         })
       },
-      policy_details: getPolicyDetails(form),
+      insured_object: getPolicyDetails(form),
       selected_providers: form.selectedProviders.map(id => ({
         provider_id: id,
         email: ''
@@ -353,7 +353,7 @@ function getPolicyDetails(form: any) {
 </script>
 
 <template>
-  <div class="max-w-4xl mx-auto">
+  <div class="max-w-4xl mx-auto quote-form-container">
     <div class="mb-8">
       <div class="flex items-center gap-3 mb-2">
         <div class="w-10 h-10 rounded-lg bg-[var(--brand)] flex items-center justify-center">
@@ -386,14 +386,14 @@ function getPolicyDetails(form: any) {
           icon: 'i-heroicons-truck',
           content: '',
           value: 'vehicle',
-          defaultOpen: true
+          defaultOpen: false
         },
         {
           label: 'Provider Selection',
           icon: 'i-heroicons-building-office',
           content: '',
           value: 'provider',
-          defaultOpen: true
+          defaultOpen: false
         }
       ]">
         <template #body="{ item }">
@@ -489,14 +489,14 @@ function getPolicyDetails(form: any) {
           icon: 'i-heroicons-shield-check',
           content: '',
           value: 'life',
-          defaultOpen: true
+          defaultOpen: false
         },
         {
           label: 'Provider Selection',
           icon: 'i-heroicons-building-office',
           content: '',
           value: 'provider',
-          defaultOpen: true
+          defaultOpen: false
         }
       ]">
         <template #body="{ item }">
@@ -573,14 +573,14 @@ function getPolicyDetails(form: any) {
           icon: 'i-heroicons-building-office-2',
           content: '',
           value: 'property',
-          defaultOpen: true
+          defaultOpen: false
         },
         {
           label: 'Provider Selection',
           icon: 'i-heroicons-building-office',
           content: '',
           value: 'provider',
-          defaultOpen: true
+          defaultOpen: false
         }
       ]">
         <template #body="{ item }">
@@ -642,14 +642,14 @@ function getPolicyDetails(form: any) {
           icon: 'i-heroicons-building-office-2',
           content: '',
           value: 'contents',
-          defaultOpen: true
+          defaultOpen: false
         },
         {
           label: 'Provider Selection',
           icon: 'i-heroicons-building-office',
           content: '',
           value: 'provider',
-          defaultOpen: true
+          defaultOpen: false
         }
       ]">
         <template #body="{ item }">
@@ -698,3 +698,87 @@ function getPolicyDetails(form: any) {
     </div>
   </div>
 </template>
+
+<style scoped>
+/* Main container width stability */
+.quote-form-container {
+  width: 100%;
+  max-width: 56rem; /* max-w-4xl equivalent */
+  margin: 0 auto;
+}
+
+/* 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(.USelectMenu) {
+  min-width: 0;
+  width: 100%;
+}
+
+/* Ensure accordion content maintains width */
+:deep(.UAccordion) {
+  width: 100%;
+  min-width: 0;
+}
+
+:deep([data-headlessui-state]) {
+  min-width: 0;
+}
+
+/* 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(.p-5) {
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Fix accordion content width */
+:deep(.UAccordionItem) {
+  width: 100%;
+  min-width: 0;
+}
+
+:deep(.UAccordionContent) {
+  width: 100%;
+  min-width: 0;
+  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(.UForm) {
+  width: 100%;
+  min-width: 0;
+}
+</style>