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>
This commit is contained in:
Fayaz Ahmed 2022-08-16 16:37:52 +05:30 committed by GitHub
parent 3cb72242de
commit 287f0a6de0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -1,7 +1,13 @@
<template> <template>
<tr> <tr>
<td>{{ app.title }}</td> <td>
<td>{{ app.content[0].url }}</td> {{ app.title }}
</td>
<td class="dashboard-app-label-url">
<span class="text-truncate">
{{ app.content[0].url }}
</span>
</td>
<td class="button-wrapper"> <td class="button-wrapper">
<woot-button <woot-button
v-tooltip.top=" v-tooltip.top="
@ -43,3 +49,19 @@ export default {
}, },
}; };
</script> </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>