Friendship management added

frontend/src/components/DialogWidget.vue

@@ -1,5 +1,6 @@
 <template>
-  <div v-if="visible" :class="['dialog-overlay', { 'non-modal': !modal, 'is-active': isActive }]" @click.self="handleOverlayClick">
+  <div v-if="visible" :class="['dialog-overlay', { 'non-modal': !modal, 'is-active': isActive }]"
+    @click.self="handleOverlayClick">
     <div class="dialog" :class="{ minimized: minimized }"
       :style="{ width: dialogWidth, height: dialogHeight, top: dialogTop, left: dialogLeft, position: 'absolute' }"
       v-if="!minimized" ref="dialog">
@@ -11,7 +12,7 @@
         <span v-if="!modal" class="dialog-minimize" @click="minimize">_</span>
         <span v-if="showClose" class="dialog-close" @click="close">✖</span>
       </div>
-      <div class="dialog-body">
+      <div class="dialog-body" :style="{ '--dialog-display': display }">
         <slot></slot>
       </div>
       <div class="dialog-footer">
@@ -62,6 +63,10 @@ export default {
     isTitleTranslated: {
       type: Boolean,
       default: false
+    },
+    display: {
+      type: String,
+      default: 'block'
     }
   },
   data() {
@@ -170,7 +175,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .dialog-overlay {
   position: fixed;
   top: 0;
@@ -236,9 +241,13 @@ export default {
   flex-grow: 1;
   padding: 20px;
   overflow-y: auto;
+  display: var(--dialog-display);
+  &[style*="--dialog-display: flex"] {
+    flex-direction: column;
+  }
 }
 
-.dialog-footer {
+dialog-footer {
   display: flex;
   justify-content: flex-end;
   padding: 10px 20px;
@@ -261,6 +270,7 @@ export default {
   color: #7E471B;
   border: 1px solid #7E471B;
 }
+
 .is-active {
   z-index: 990;
 }