live site text overflow

src/components/MosaicModal.vue

@@ -7,7 +7,11 @@
                 @click.stop
                 ref="dlWindow"
             >
-                <dl-row v-for="row in item.dl" :row="row" />
+                <dl-row
+                    v-for="row in item.dl"
+                    :class="_kebabCase(row.label)"
+                    :row="row"
+                />
             </div>
 
             <div class="window gif" @click.stop ref="gifWindow">
@@ -48,6 +52,7 @@
 import gsap from 'gsap'
 import { onMounted, ref, shallowRef } from 'vue'
 import { useRouter } from 'vue-router'
+import _kebabCase from 'lodash/kebabCase'
 
 const props = defineProps({ item: Object })
 
@@ -144,6 +149,17 @@ defineExpose({ animateIn, animateOut })
                 border-top: none;
                 padding-top: 0;
             }
+            .dl-row.live-site .strapi-content {
+                overflow: hidden;
+
+                a {
+                    display: block;
+                    width: 100%;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+            }
         }
         &.gif {
             padding: 1rem;