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

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 {