From f7ec89d8b50a0f0c02b46e89b4ca5379419751ff Mon Sep 17 00:00:00 2001
From: Lumi Pakkanen <lumi.pakkanen@gmail.com>
Date: Wed, 22 May 2024 20:07:29 +0300
Subject: [PATCH] Work around SVG baseline bug in Firefox

ref #710
---
 src/components/MosPyramid.vue | 33 +++++----------------------------
 1 file changed, 5 insertions(+), 28 deletions(-)

diff --git a/src/components/MosPyramid.vue b/src/components/MosPyramid.vue
index 2cbb09c5..625f7795 100644
--- a/src/components/MosPyramid.vue
+++ b/src/components/MosPyramid.vue
@@ -93,40 +93,16 @@ const generators = computed(() => {
         :class="{ selected: selected === info.pattern }"
       >
         <rect :x="info.x - 0.45" :y="info.y - 0.45" width="0.9" height="0.9" />
-        <text
-          :x="info.x - 0.4"
-          :y="info.y - 0.3"
-          font-size="0.11"
-          dominant-baseline="middle"
-          text-anchor="start"
-        >
+        <text :x="info.x - 0.4" :y="info.y - 0.3" font-size="0.11" text-anchor="start">
           {{ info.pattern }}
         </text>
-        <text
-          :x="info.x + 0.4"
-          :y="info.y - 0.3"
-          font-size="0.11"
-          dominant-baseline="middle"
-          text-anchor="end"
-        >
+        <text :x="info.x + 0.4" :y="info.y - 0.3" font-size="0.11" text-anchor="end">
           {{ generators[i][j] }}
         </text>
-        <text
-          :x="info.x"
-          :y="info.y"
-          font-size="0.25"
-          dominant-baseline="middle"
-          text-anchor="middle"
-        >
+        <text :x="info.x" :y="info.y" font-size="0.25" text-anchor="middle">
           {{ info.abbreviation }}
         </text>
-        <text
-          :x="info.x"
-          :y="info.y + 0.3"
-          font-size="0.09"
-          dominant-baseline="middle"
-          text-anchor="middle"
-        >
+        <text :x="info.x" :y="info.y + 0.3" font-size="0.09" text-anchor="middle">
           {{ info.name }}
         </text>
       </g>
@@ -155,6 +131,7 @@ g:hover > rect {
   stroke-width: 0.02;
 }
 text {
+  dominant-baseline: central;
   fill: var(--color-accent-text-btn);
 }
 g:hover > text {