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');
 })();

dashboard/src/views/AppsView.vue

@@ -236,7 +236,7 @@ onUnmounted(() => {
       <TransitionGroup name="grid-animation" tag="div" class="grid" v-if="viewType === VIEW_TYPE.GRID">
         <a v-for="app in filteredApps" :key="app.id" class="grid-item" @click="onOpenApp(app, $event)" :href="'https://' + app.fqdn" target="_blank">
           <img :alt="app.label || app.subdomain || app.fqdn" :src="app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
-          <div class="grid-item-label">{{ app.label || app.subdomain || app.fqdn }}</div>
+          <div class="grid-item-label" v-fit-text>{{ app.label || app.subdomain || app.fqdn }}</div>
           <div class="grid-item-task-label">{{ AppsModel.installationStateLabel(app) }}</div>
           <div class="apps-progress" v-show="app.progress && isOperator(app)">
             <div class="apps-progress-filled" :style="{ width: app.progress+'%' }"></div>
@@ -434,6 +434,7 @@ onUnmounted(() => {
   font-weight: 100;
   margin: 5px 0 5px 0;
   color: var(--pankow-text-color);
+  text-wrap: nowrap;
 }
 
 .config {