misc fixes

src/assets/scss/fonts/_redaction.scss

@@ -16,3 +16,11 @@ $font-styles: (
     src: url('#{$location}/#{$font-slug}-#{$weight}-#{$style}.woff2') format('woff2');
   }
 }
+
+@font-face {
+  font-family: $font-name;
+  font-style: italic;
+  font-display: swap;
+  font-weight: 700;
+  src: url('#{$location}/#{$font-slug}-400-italic.woff2') format('woff2');
+}

src/components/formItems/MultipleTagsSelect.vue

@@ -99,6 +99,8 @@ export default {
     .b-form-tag-remove {
       opacity: 1;
       line-height: 0;
+      height: 15px;
+      text-shadow: none;
     }
   }
 }

src/pages/gallery/GalleryMap.vue

@@ -126,15 +126,15 @@ export default {
     height: var(--max);
 
     img {
-      max-width: 100%;
-      max-height: 100%;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
       margin: auto;
       cursor: pointer;
     }
 
-    &.current {
+    &.current img {
       border: 5px solid theme-color('creation');
-      background-color: theme-color('creation');
     }
   }
 }

src/pages/gallery/GalleryView.vue

@@ -44,6 +44,7 @@
           <node-view
             :node="node"
             @close-node="hide"
+            @open-node="$emit('view-origin')"
             force-type="ref" show-origin
           />
         </template>

src/pages/library/LibraryMap.vue

@@ -6,7 +6,11 @@
     >
       <foreignObject
         v-for="node in filteredNodes" :key="'f-' + node.data.id"
-        :style="`--x: ${node.x}px; --y: ${node.y}px; --r: ${node.rotate}deg;`"
+        :class="{ 'safari': isSafari }"
+        :width="size.w" :height="size.h"
+        :x="node.x" :y="node.y"
+        :transform="`rotate(${node.rotate}) translate(-${size.w / 2}, -${size.h / 2})`"
+        :transform-origin="`${node.x} ${node.y}`"
       >
         <node-view
           :id="'preview-node-' + node.data.id"
@@ -78,6 +82,16 @@ export default {
     dataNodes () {
       if (!this.nodes) return
       return this.nodes.map(node => node.data)
+    },
+
+    isSafari () {
+      return /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+    },
+
+    size () {
+      return window.innerWidth < 1200
+        ? { w: 560 / 1.5, h: 350 / 1.5 }
+        : { w: 560, h: 350 }
     }
   },
 
@@ -131,17 +145,25 @@ export default {
 <style lang="scss">
 #library-map {
   foreignObject {
-    width: $node-card-width-sm;
-    height: $node-card-height-sm;
-    x: var(--x);
-    y: var(--y);
-    transform-origin: var(--x) var(--y);
-    transform: rotate(var(--r)) translate(-#{$node-card-width / 2}, -#{$node-card-height / 2});
+    // width: $node-card-width-sm;
+    // height: $node-card-height-sm;
+    // x: var(--x);
+    // y: var(--y);
+    // transform-origin: var(--x) var(--y);
+    // transform: rotate(var(--r)) translate(-#{$node-card-width / 2}, -#{$node-card-height / 2});
     overflow: visible;
 
     @include media-breakpoint-up($size-bp) {
-      width: $node-card-width;
-      height: $node-card-height;
+      // width: $node-card-width;
+      // height: $node-card-height;
+    }
+
+    &.safari .node-view {
+      position: static;
+
+      .node-view-footer {
+        display: none;
+      }
     }
 
     .node-view {

src/pages/library/LibraryOptions.vue

@@ -90,7 +90,7 @@
     <b-form-group v-else id="depart-group" :label="$t('variants.depart')">
       <b-dropdown id="text-depart-select" variant="outline-dark" right>
         <template #button-content>
-          <node-view-title :node="activeNode" />
+          <node-view-title v-if="activeNode" :node="activeNode" />
         </template>
 
         <b-dropdown-item v-for="node in nodesDeparts" :key="node.id" @click="activeNodeId = node.id">
@@ -208,7 +208,9 @@ export default {
     scrollToChar (char) {
       const h = document.querySelector(`h3[id=${char}]`)
       if (h) {
-        h.scrollIntoView({ behavior: 'smooth' })
+        h.scrollIntoView({
+          behavior: navigator.userAgent.indexOf('Safari') !== -1 ? 'instant' : 'smooth'
+        })
       }
     }
   }

src/pages/library/LibraryTree.vue

@@ -210,6 +210,10 @@ foreignObject {
 }
 
 .dot-btn {
+  @media (hover: none) {
+    display: none;
+  }
+
   transform: translate(-50%, -50%);
   pointer-events: none;
   min-width: 200px;