diff --git a/src/Frontend/src/components/messages2/SequenceDiagram.vue b/src/Frontend/src/components/messages2/SequenceDiagram.vue
index cc842c752..08dd5f20f 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram.vue
@@ -19,7 +19,7 @@ onMounted(() => store.refreshConversation());
 
 <template>
   <div class="outer" @scroll="(ev) => (endpointYOffset = (ev.target as Element).scrollTop)">
-    <svg class="sequence-diagram" :width="`max(100%, ${isNaN(maxWidth) ? 0 : maxWidth}px)`" :height="maxHeight + 20">
+    <svg class="sequence-diagram" :style="{ width: `max(100%, ${isNaN(maxWidth) ? 0 : maxWidth}px)` }" :height="maxHeight + 20">
       <Timeline />
       <Handlers />
       <Routes />
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
index 402020585..9f3a4d5d6 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
@@ -130,7 +130,7 @@ function scrollToIfSelected(el: SVGElement, handlerId: string | undefined) {
       @click="handler.incomingId && !handler.messageTypeSelected && store.navigateTo(handler.messageId.uniqueId, handler.messageId.id, handler.isError)"
     >
       <path d="M9,3L9,3 9,0 0,0 0,3 4,3 4,6 0,6 0,9 4,9 4,12 0,12 0,15 9,15 9,12 5,12 5,9 9,9 9,6 5,6 5,3z" />
-      <text x="14" y="10" alignment-baseline="middle" :ref="(el) => setMessageTypeRef(el as SVGTextElement, i)">{{ handler.messageType }}</text>
+      <text x="14" y="0" dominant-baseline="text-before-edge" :ref="(el) => setMessageTypeRef(el as SVGTextElement, i)">{{ handler.messageType }}</text>
     </g>
   </g>
 </template>
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue
index f5b608f0f..d8cd9bcb5 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue
@@ -114,7 +114,7 @@ function setMessageTypeRef(el: SVGTextElement, index: number) {
           <path v-else-if="arrow.type === RoutedMessageType.Command" d="M 0,0 M 32,32 M 0,16 A 6,6 0 1 1 12,16 A 6,6 0 1 1 0,16   M 14,13 v6 h10 v2 L32,16 L24,11 v2 z" />
           <path v-else-if="arrow.type === RoutedMessageType.Local" d="M 32 6 h -14 v 4 h 10 v 14 H 16 V 19.6 L 4 26 l 12 6.4 V 28 h 16 V 6 z M 16 8.2 C 16 11.4 13.4 14 10 14 S 4 11.4 4 8.2 S 6.6 2 10 2 S 16 4.8 16 8 z" />
         </svg>
-        <text :x="15 + Message_Type_Margin + Message_Type_Margin" :y="Message_Type_Margin" alignment-baseline="before-edge" :ref="(el) => setMessageTypeRef(el as SVGTextElement, i)">{{ arrow.messageType }}</text>
+        <text :x="15 + Message_Type_Margin + Message_Type_Margin" :y="Message_Type_Margin" dominant-baseline="text-before-edge" :ref="(el) => setMessageTypeRef(el as SVGTextElement, i)">{{ arrow.messageType }}</text>
       </g>
     </g>
   </template>