* Make tooltip auto-wrap

src/renderer/components/ft-tooltip/ft-tooltip.css

@@ -93,13 +93,11 @@
 }
 
 .text.allowNewlines {
-  white-space: pre-wrap;
+  white-space: pre;
   text-align: start;
-
-  @media only screen and (min-width: 1000px) {
-    /* Enough space to NOT wrap */
-    white-space: pre;
-  }
+}
+.text.allowNewlines.wrap {
+  white-space: pre-wrap;
 }
 
 .tooltip {

src/renderer/components/ft-tooltip/ft-tooltip.js

@@ -2,6 +2,26 @@ import { defineComponent } from 'vue'
 
 let idCounter = 0
 
+function isOutOfViewport(el) {
+  if (el == null) { return {} }
+
+  const bounding = el.getBoundingClientRect()
+  const out = {}
+
+  out.top = bounding.top < 0
+  out.left = bounding.left < 0
+  out.bottom = bounding.bottom > (window.innerHeight || document.documentElement.clientHeight)
+  out.right = bounding.right > (window.innerWidth || document.documentElement.clientWidth)
+  out.horizontal = out.left || out.right
+  out.veritical = out.top || out.bottom
+  out.any = out.top || out.left || out.bottom || out.right
+  out.all = out.top && out.left && out.bottom && out.right
+
+  out.bounding = bounding
+
+  return out
+}
+
 export default defineComponent({
   name: 'FtTooltip',
   props: {
@@ -23,7 +43,28 @@ export default defineComponent({
     const id = `ft-tooltip-${++idCounter}`
 
     return {
-      id
+      id,
+      isTooltipOutOfViewportResult: {}
     }
-  }
+  },
+  computed: {
+    tooltipOutsideViewPort() {
+      return this.isTooltipOutOfViewportResult.horizontal
+    },
+  },
+  mounted() {
+    this.updateSizeRelatedStates()
+    window.addEventListener('resize', this.updateSizeRelatedStates)
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.updateSizeRelatedStates)
+  },
+  methods: {
+    updateSizeRelatedStates() {
+      if (this.allowNewlines) {
+        // Only when newlines allowed have issue with wrapping
+        this.isTooltipOutOfViewportResult = isOutOfViewport(this.$refs.tooltip)
+      }
+    },
+  },
 })

src/renderer/components/ft-tooltip/ft-tooltip.vue

@@ -9,10 +9,12 @@
     </button>
     <p
       :id="id"
+      ref="tooltip"
       class="text"
       :class="{
         [position]: true,
         allowNewlines,
+        wrap: tooltipOutsideViewPort,
       }"
       role="tooltip"
       v-text="tooltip"