Add v-fit-text directive to adjust font-size until the text fits

dashboard/src/index.js

@@ -4,6 +4,30 @@ import '@fontsource/noto-sans';
 
 import { tooltip, fallbackImage } from '@cloudron/pankow';
 
+const fitText = {
+  mounted(el) {
+    let fontSize = 14;
+
+    function attempt() {
+      setTimeout(() => {
+        const curWidth = el.getBoundingClientRect().width;
+        const parentWidth = el.parentElement.getBoundingClientRect().width;
+
+        if (!curWidth && !parentWidth) return attempt();
+
+        if (curWidth < parentWidth-12) return;
+
+        fontSize -= 0.2;
+        el.style.fontSize = fontSize + 'px';
+
+        attempt();
+      }, 1);
+    }
+
+    attempt();
+  }
+};
+
 // Override the link rendering method for markdown renderings to open in new tab
 import { marked } from 'marked';
 
@@ -15,7 +39,6 @@ renderer.link = function(item) {
 
 marked.setOptions({ renderer });
 
-
 import i18n from './i18n.js';
 import Index from './Index.vue';
 
@@ -28,6 +51,7 @@ import './style.css';
 
   app.directive('tooltip', tooltip);
   app.directive('fallback-image', fallbackImage);
+  app.directive('fit-text', fitText);
 
   app.mount('#app');
 })();