Fixed dialog problems

src/common/components/DialogComponent.vue

@@ -1,63 +1,62 @@
 <template>
-    <div v-if="modelValue" class="dialog-overlay">
-      <div class="dialog">
-        <h2>{{ title }}</h2>
-        <p>{{ message }}</p>
-        <button @click="closeDialog">OK</button>
-      </div>
+  <div v-if="modelValue" class="dialog-overlay">
+    <div class="dialog">
+      <h2>{{ title }}</h2>
+      <p>{{ message }}</p>
+      <button @click="closeDialog">OK</button>
     </div>
-  </template>
-  
-  <script>
-  export default {
-    name: 'DialogComponent',
-    props: {
-      title: {
-        type: String,
-        required: true
-      },
-      message: {
-        type: String,
-        required: true
-      },
-      modelValue: {
-        type: Boolean,
-        default: false
-      }
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DialogComponent',
+  props: {
+    title: {
+      type: String,
+      required: true
     },
-    methods: {
-      closeDialog() {
-        this.$emit('update:modelValue', false);
-        this.$emit('close');
-      }
+    message: {
+      type: String,
+      required: true
+    },
+    modelValue: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    closeDialog() {
+      this.$emit('update:modelValue', false);
+      this.$emit('close');
     }
-  };
-  </script>
-  
-  <style scoped>
-  .dialog-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
   }
-  
-  .dialog {
-    background: white;
-    padding: 20px;
-    border-radius: 5px;
-    max-width: 400px;
-    width: 100%;
-    text-align: center;
-  }
-  
-  button {
-    margin-top: 20px;
-  }
-  </style>
-  
+};
+</script>
+
+<style scoped>
+.dialog-overlay {
+  top: calc(50% - 25em);
+  left: 5%;
+  width: 90%;
+  height: 50em;
+  background: rgba(0, 0, 0, .5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+}
+
+.dialog {
+  background: white;
+  padding: 20px;
+  border-radius: 5px;
+  max-width: 400px;
+  width: 100%;
+  text-align: center;
+}
+
+button {
+  margin-top: 20px;
+}
+</style>

src/components/AddImageDialog.vue

@@ -4,7 +4,8 @@
             <div class="dialog-content">
                 <h3>Bild auswählen</h3>
                 <div class="images-container">
-                    <div v-for="image in images" :key="image.id" class="image-block" @click="selectImage(image)" :class="{ selected: image.id === selectedImage?.id }">
+                    <div v-for="image in images" :key="image.id" class="image-block" @click="selectImage(image)"
+                        :class="{ selected: image.id === selectedImage?.id }">
                         <img :src="'/images/uploads/' + image.filename" />
                         <span v-if="image.description" :title="image.description">{{ image.title }}</span>
                         <span v-else>{{ image.title }}</span>
@@ -77,21 +78,22 @@ export default {
 
 <style scoped>
 .dialog-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
+    top: calc(50% - 25em);
+    left: 5%;
+    width: 90%;
+    height: 50em;
+    background: rgba(0, 0, 0, .5);
     display: flex;
     justify-content: center;
     align-items: center;
+    overflow: auto;
 }
 
 .dialog-content {
-    background: white;
     padding: 20px;
     border-radius: 8px;
+    width: 100%;
+    height: 100%;
 }
 
 .images-container {