Firefox fixes (#2336)

* set width in css, since pixel/max/% sizing is not supported on the width element in safari and has a warning in firefox

* change text alignment to dominant-baseline since alignment-baseline is not supported on text elements in firefox

* set width directly through style rather than utilising a css variable

Author: PhilBastian

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 />

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>

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>