From 1664e4dc511f0dea60e86b0d501395e051477c7a Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 24 Sep 2024 10:56:34 +0200
Subject: [PATCH] fix text short property collision

---
 client/src/components/ActivityBar/ActivityItem.vue | 1 +
 client/src/components/Common/TextShort.vue         | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index cb0bb19e1f7a..20c040dee10e 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -105,6 +105,7 @@ function onClick(evt: MouseEvent): void {
 
 .activity-item {
     display: flex;
+    flex-direction: column;
 
     &:deep(.variant-danger) {
         color: $brand-danger;
diff --git a/client/src/components/Common/TextShort.vue b/client/src/components/Common/TextShort.vue
index 012c770c6137..e1f0842a508c 100644
--- a/client/src/components/Common/TextShort.vue
+++ b/client/src/components/Common/TextShort.vue
@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<Props>(), {
     maxLength: 24,
 });
 
-const text = computed(() => {
+const trimmedText = computed(() => {
     if (props.text.length > props.maxLength) {
         const partialText = props.text.slice(0, props.maxLength);
         return `${partialText}...`;
@@ -22,6 +22,6 @@ const text = computed(() => {
 
 <template>
     <span class="text-break text-center">
-        {{ text }}
+        {{ trimmedText }}
     </span>
 </template>