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:
parent
3cb72242de
commit
287f0a6de0
1 changed files with 24 additions and 2 deletions
|
@ -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: ' ';
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue