better title in message view modal

front/src/components/modals/MessageViewModal.vue

@@ -5,6 +5,7 @@ import Content from "../structure/message/Content.vue";
 import Modal from "./Modal.vue";
 import MemberList from "@/views/room/MemberList.vue";
 import { removeDuplicates } from "@/utils/array";
+import { decodeEmojis } from "@/utils/string";
 
 const props = defineProps({
     messageId: { type: Number, require: true },
@@ -43,12 +44,16 @@ watch(
 
 <template>
     <div class="main">
-        <Modal v-if="messageId != -1" @close-modal="() => $emit('close')">
+        <Modal v-if="messageId != -1" @close-modal="() => $emit('close')" id="modal">
+            <template v-slot:header>
+                <h2 id="header">
+                    {{ decodeEmojis(props.message?.subject) ?? "No Object" }}
+                </h2>
+            </template>
             <template v-slot:body>
                 <MemberList type="from" :members="fromA" />
                 <MemberList type="to" :members="toA" />
                 <MemberList v-if="ccA.length > 0" type="cc" :members="ccA" />
-                <div>{{ props.message?.subject ?? "No Object" }}</div>
                 <Content type="large" :content="props.message?.content" class="content" />
             </template>
         </Modal>
@@ -59,6 +64,11 @@ watch(
 .main {
     min-width: 700px;
 }
+
+#header {
+    width: 700px;
+}
+
 /* todo define size automatically */
 .content {
     width: 700px;

front/src/components/modals/Modal.vue

@@ -26,7 +26,9 @@ onUnmounted(() => {
     <div class="modal-wrapper">
         <div class="modal" v-on-click-outside="close">
             <header class="modal-header">
-                <h2>{{ props.title }}</h2>
+                <slot name="header">
+                    <h2>{{ props.title }}</h2>
+                </slot>
                 <div class="close-button" @click="close"></div>
             </header>