From 287f0a6de0679079b098b7e754d42e4aed9b281a Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Date: Tue, 16 Aug 2022 16:37:52 +0530
Subject: [PATCH] Fix: Truncate overflowing dashboard apps text (#5221)

* Truncate overflowing text

* Update app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Fix overflowing content

* Reviwe changes

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 .../DashboardApps/DashboardAppsRow.vue        | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
index 6b1cce332..3ff783771 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
@@ -1,7 +1,13 @@
 <template>
   <tr>
-    <td>{{ app.title }}</td>
-    <td>{{ app.content[0].url }}</td>
+    <td>
+      {{ app.title }}
+    </td>
+    <td class="dashboard-app-label-url">
+      <span class="text-truncate">
+        {{ app.content[0].url }}
+      </span>
+    </td>
     <td class="button-wrapper">
       <woot-button
         v-tooltip.top="
@@ -43,3 +49,19 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.dashboard-app-label-url {
+  position: relative;
+  width: 50%;
+  &:before {
+    content: '&nbsp;';
+    visibility: hidden;
+  }
+  span {
+    position: absolute;
+    left: 0;
+    right: 0;
+  }
+}
+</style>