From 95ca7a4aaf8f7cbf4f7a263a8e795c51a48fe81e Mon Sep 17 00:00:00 2001
From: root <root@hermes.federspiel.tech>
Date: Tue, 1 Sep 2026 06:20:11 +0000
Subject: [PATCH] Textvorlagen-Modal scrollbar machen

---
 frontend/pages/settings/texttemplates.vue | 128 +++++++++++-----------
 1 file changed, 63 insertions(+), 65 deletions(-)

diff --git a/frontend/pages/settings/texttemplates.vue b/frontend/pages/settings/texttemplates.vue
index bab737c..d1152d1 100644
--- a/frontend/pages/settings/texttemplates.vue
+++ b/frontend/pages/settings/texttemplates.vue
@@ -238,64 +238,63 @@ 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>
-        <template #header>
-          <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="lg:col-span-2 space-y-4">
-          <UFormField label="Bezeichnung" required>
-            <UInput v-model="itemInfo.name" placeholder="z.B. Standard Angebotstext" icon="i-heroicons-tag"/>
-          </UFormField>
-
-          <div class="grid grid-cols-2 gap-4">
-            <UFormField label="Dokumententyp" required>
-              <USelectMenu
-                  v-model="itemInfo.documentType"
-                  :options="Object.keys(dataStore.documentTypesForCreation || {})
-                  .filter(i => i !== 'serialInvoices')
-                  .map(i => ({ label: dataStore.documentTypesForCreation[i].label, key: i }))"
-                  option-attribute="label"
-                  value-attribute="key"
-              />
-            </UFormField>
-
-            <UFormField label="Position" required>
-              <USelectMenu
-                  v-model="itemInfo.pos"
-                  :options="[
-                  { label: 'Einleitung (Oben)', key: 'startText' },
-                  { label: 'Endtext (Unten)', key: 'endText' }
-                ]"
-                  option-attribute="label"
-                  value-attribute="key"
-              />
-            </UFormField>
-          </div>
-
-          <UFormField label="Text Inhalt" required help="Klicken Sie rechts auf eine Variable, um sie einzufügen.">
-            <UTextarea
-                ref="textareaRef"
-                v-model="itemInfo.text"
-                :rows="10"
-                placeholder="Sehr geehrte Damen und Herren..."
-                class="font-mono text-sm"
-            />
-          </UFormField>
-
-          <UCheckbox v-model="itemInfo.default" label="Als Standard für diesen Typ verwenden"/>
+      <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">
+        <div class="flex shrink-0 items-center justify-between border-b border-default px-6 py-5 sm:px-7">
+          <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>
 
-        <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="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="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>
+
+              <div class="grid grid-cols-2 gap-4">
+                <UFormField label="Dokumententyp" required>
+                  <USelectMenu
+                      v-model="itemInfo.documentType"
+                      :options="Object.keys(dataStore.documentTypesForCreation || {})
+                      .filter(i => i !== 'serialInvoices')
+                      .map(i => ({ label: dataStore.documentTypesForCreation[i].label, key: i }))"
+                      option-attribute="label"
+                      value-attribute="key"
+                  />
+                </UFormField>
+
+                <UFormField label="Position" required>
+                  <USelectMenu
+                      v-model="itemInfo.pos"
+                      :options="[
+                      { label: 'Einleitung (Oben)', key: 'startText' },
+                      { label: 'Endtext (Unten)', key: 'endText' }
+                    ]"
+                      option-attribute="label"
+                      value-attribute="key"
+                  />
+                </UFormField>
+              </div>
+
+              <UFormField label="Text Inhalt" required help="Klicken Sie rechts auf eine Variable, um sie einzufügen.">
+                <UTextarea
+                    ref="textareaRef"
+                    v-model="itemInfo.text"
+                    :rows="10"
+                    placeholder="Sehr geehrte Damen und Herren..."
+                    class="font-mono text-sm"
+                />
+              </UFormField>
+
+              <UCheckbox v-model="itemInfo.default" label="Als Standard für diesen Typ verwenden"/>
+            </div>
+
+            <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
@@ -340,16 +339,16 @@ const getDocLabel = (type) => {
                 {{ example }}
               </code>
             </div>
+          </div>
+            </div>
+
           </div>
         </div>
 
-      </div>
-
-        <template #footer>
-          <div class="flex justify-end gap-3">
-            <UButton color="gray" variant="ghost" @click="editTemplateModalOpen = false">
-              Abbrechen
-            </UButton>
+        <div class="flex shrink-0 justify-end gap-3 border-t border-default px-6 py-4 sm:px-7">
+          <UButton color="gray" variant="ghost" @click="editTemplateModalOpen = false">
+            Abbrechen
+          </UButton>
 
             <UButton
                 v-if="!itemInfo.id"
@@ -370,9 +369,8 @@ const getDocLabel = (type) => {
             >
               Speichern
             </UButton>
-          </div>
-        </template>
-      </UCard>
+        </div>
+      </div>
     </template>
   </UModal>
 </template>