wip: works, but style really broken

ui/src/components/calendar/SVGRect.vue

@@ -1,29 +1,29 @@
 <template>
   <foreignObject
+    ref="foreign_object"
     :x="Math.round(parent_aspect_ratio * rectangle.left)"
     :y="rectangle.top"
     :width="Math.round(parent_aspect_ratio * rectangle.width)"
     :height="rectangle.height"
     :style="`transform: scaleX(${1 / parent_aspect_ratio})`"
   >
+    <!-- v-if="variant !== undefined" -->
     <div
-      v-if="variant !== undefined"
       xmlns="http://www.w3.org/1999/xhtml"
-      class="px-4 is-flex is-align-items-center is-justify-content-center is-size-1 has-text-weight-bold"
+      class="px-4 is-flex is-align-items-center is-justify-content-center is-size-1 has-text-weight-bold has-background-primary"
       style="height: inherit"
     >
       <slot name="default" />
     </div>
   </foreignObject>
-  <rect
-    ref="rect"
+  <!-- <rect
     v-bind="$attrs"
     :class="variant !== undefined ? variant : ''"
     :x="rectangle.left"
     :y="rectangle.top"
     :width="rectangle.width"
     :height="rectangle.height"
-  />
+  /> -->
 </template>
 
 <script lang="ts">
@@ -54,7 +54,7 @@ export default class extends Vue {
   private refreshKey = 0;
 
   declare $refs: {
-    rect: unknown;
+    foreign_object: unknown;
   };
 
   private refresh() {
@@ -70,14 +70,14 @@ export default class extends Vue {
     this.refreshKey; // read it just to force recompute on change
 
     if (
-      !(this.$refs.rect instanceof SVGRectElement) ||
-      this.$refs.rect.parentElement === null
+      !(this.$refs.foreign_object instanceof SVGForeignObjectElement) ||
+      this.$refs.foreign_object.parentElement === null
     ) {
       this.refresh();
       return 1;
     }
 
-    const parent = this.$refs.rect.parentElement;
+    const parent = this.$refs.foreign_object.parentElement;
     const result = parent.clientWidth / parent.clientHeight;
 
     // force recompute for suspicious results