frontend/pages/settings/texttemplates.vue

@@ -238,21 +238,20 @@ const getDocLabel = (type) => {
     </UTable>
   </UDashboardPanelContent>
 
-  <UModal v-model:open="editTemplateModalOpen" :ui="{ width: 'sm:max-w-4xl' }">
+  <UModal v-model:open="editTemplateModalOpen" :ui="{ content: 'sm:max-w-4xl' }">
     <template #content>
-      <UCard>
+      <div class="mx-auto flex max-h-[85vh] w-full max-w-4xl flex-col overflow-hidden rounded-2xl bg-default shadow-xl ring-1 ring-black/5">
-        <template #header>
+        <div class="flex shrink-0 items-center justify-between border-b border-default px-6 py-5 sm:px-7">
-          <div class="flex justify-between items-center">
           <h3 class="text-lg font-semibold">
             {{ itemInfo.id ? 'Vorlage bearbeiten' : 'Neue Vorlage erstellen' }}
           </h3>
           <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark" @click="editTemplateModalOpen = false"/>
         </div>
-        </template>
 
-      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div class="min-h-0 flex-1 overflow-y-auto px-6 py-5 sm:px-7">
+          <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
 
-        <div class="lg:col-span-2 space-y-4">
+            <div class="space-y-4 lg:col-span-2">
               <UFormField label="Bezeichnung" required>
                 <UInput v-model="itemInfo.name" placeholder="z.B. Standard Angebotstext" icon="i-heroicons-tag"/>
               </UFormField>
@@ -295,7 +294,7 @@ const getDocLabel = (type) => {
               <UCheckbox v-model="itemInfo.default" label="Als Standard für diesen Typ verwenden"/>
             </div>
 
-        <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700 h-fit">
+            <div class="h-fit rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800">
           <h4 class="font-semibold mb-3 flex items-center gap-2">
             <UIcon name="i-heroicons-variable"/>
             Variablen
@@ -344,9 +343,9 @@ const getDocLabel = (type) => {
             </div>
 
           </div>
+        </div>
 
-        <template #footer>
+        <div class="flex shrink-0 justify-end gap-3 border-t border-default px-6 py-4 sm:px-7">
-          <div class="flex justify-end gap-3">
           <UButton color="gray" variant="ghost" @click="editTemplateModalOpen = false">
             Abbrechen
           </UButton>
@@ -371,8 +370,7 @@ const getDocLabel = (type) => {
               Speichern
             </UButton>
         </div>
-        </template>
+      </div>
-      </UCard>
     </template>
   </UModal>
 </template>