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">
+      <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">
-        <template #header>
+        <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">
+        <div class="flex-1 space-y-6 overflow-y-auto px-6 py-5 sm:px-7">
-          <UFormField label="Dokumententyp" required>
+          <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,8 +141,7 @@ const startImport = () => {
           </div>
         </div>
 
-        <template #footer>
+        <div class="flex shrink-0 justify-end gap-2 border-t border-default px-6 py-4 sm:px-7">
-          <div class="flex justify-end gap-2">
           <UButton color="neutral" variant="ghost" @click="modal.close()">
             Abbrechen
           </UButton>
@@ -139,8 +149,7 @@ const startImport = () => {
             Kopieren
           </UButton>
         </div>
-        </template>
+      </div>
-      </UCard>
     </template>
   </UModal>
 </template>