Fix Ausgangsbeleg kopieren

frontend/components/copyCreatedDocumentModal.vue

@@ -26,6 +26,10 @@ const documentTypeItems = computed(() => {
   }))
 })
 
+const selectedDocumentType = computed(() => {
+  return documentTypeItems.value.find((item) => item.key === documentTypeToUse.value) || null
+})
+
 const visibleImportKeys = computed(() => {
   return Object.keys(optionsToImport.value).filter((key) => {
     if (documentTypeToUse.value !== props.type) {
@@ -83,12 +87,12 @@ const startImport = () => {
 </script>
 
 <template>
-  <UModal>
+  <UModal :ui="{ content: 'sm:max-w-2xl' }">
     <template #content>
-      <UCard class="mx-auto w-full max-w-2xl shadow-xl ring-1 ring-black/5">
-        <template #header>
+      <div class="mx-auto flex max-h-[85vh] w-full max-w-2xl flex-col overflow-hidden rounded-2xl bg-default shadow-xl ring-1 ring-black/5">
+        <div class="border-b border-default px-6 py-5 sm:px-7">
           <div class="flex items-start gap-4">
-            <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary ring-1 ring-primary/15">
+            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary ring-1 ring-primary/15">
               <UIcon name="i-heroicons-document-duplicate" class="h-6 w-6" />
             </div>
             <div class="min-w-0">
@@ -96,10 +100,10 @@ const startImport = () => {
               <p class="mt-1 text-sm text-muted">Wähle den Zieltyp und welche Inhalte in das neue Dokument übernommen werden sollen.</p>
             </div>
           </div>
-        </template>
+        </div>
 
-        <div class="space-y-6">
-          <UFormField label="Dokumententyp" required>
+        <div class="flex-1 space-y-6 overflow-y-auto px-6 py-5 sm:px-7">
+          <UFormField label="Dokumententyp" required class="w-full">
             <USelectMenu
                 v-model="documentTypeToUse"
                 :items="documentTypeItems"
@@ -107,9 +111,16 @@ const startImport = () => {
                 label-key="labelSingle"
                 class="w-full"
                 size="lg"
+                :placeholder="selectedDocumentType?.labelSingle || 'Dokumententyp wählen'"
                 :search-input="{ placeholder: 'Dokumententyp suchen...' }"
                 :filter-fields="['labelSingle']"
-            />
+            >
+              <template #default>
+                <span class="block truncate">
+                  {{ selectedDocumentType?.labelSingle || "Dokumententyp wählen" }}
+                </span>
+              </template>
+            </USelectMenu>
           </UFormField>
 
           <div class="space-y-3">
@@ -130,17 +141,15 @@ const startImport = () => {
           </div>
         </div>
 
-        <template #footer>
-          <div class="flex justify-end gap-2">
-            <UButton color="neutral" variant="ghost" @click="modal.close()">
-              Abbrechen
-            </UButton>
-            <UButton @click="startImport">
-              Kopieren
-            </UButton>
-          </div>
-        </template>
-      </UCard>
+        <div class="flex shrink-0 justify-end gap-2 border-t border-default px-6 py-4 sm:px-7">
+          <UButton color="neutral" variant="ghost" @click="modal.close()">
+            Abbrechen
+          </UButton>
+          <UButton @click="startImport">
+            Kopieren
+          </UButton>
+        </div>
+      </div>
     </template>
   </UModal>
 </template>