Merge pull request #534 from juliahermak/fix/chat-name-width-overflow…

…-ellipsis fix(chat): added ellipsis for long chat names
Adamant-im · Oct 6, 2023 · cc43c06 · cc43c06
2 parents 21d529c + 90109ec
commit cc43c06
Showing 1 changed file with 20 additions and 14 deletions.
diff --git a/src/components/ChatPreview.vue b/src/components/ChatPreview.vue
@@ -27,13 +27,18 @@
     </template>
 
     <div>
-      <v-list-item-title
-        :class="{
-          'a-text-regular-enlarged-bold': true,
-          [`${className}__title`]: true
-        }"
-        v-text="isAdamantChat(contactId) ? $t(contactName) : contactName"
-      />
+      <div :class="`${className}__heading`">
+        <v-list-item-title
+          :class="{
+            'a-text-regular-enlarged-bold': true,
+            [`${className}__title`]: true
+          }"
+          v-text="isAdamantChat(contactId) ? $t(contactName) : contactName"
+        />
+        <div v-if="!isMessageReadonly" :class="`${className}__date`">
+          {{ formatDate(createdAt) }}
+        </div>
+      </div>
 
       <!-- New chat (no messages yet) -->
       <template v-if="isNewChat">
@@ -70,10 +75,6 @@
         </v-list-item-subtitle>
       </template>
     </div>
-
-    <div v-if="!isMessageReadonly" :class="`${className}__date`">
-      {{ formatDate(createdAt) }}
-    </div>
   </v-list-item>
 </template>
 
@@ -275,6 +276,12 @@ export default {
     margin-right: 16px;
   }
 
+  &__heading {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
   &__title {
     line-height: 24px;
     margin-bottom: 0;
@@ -290,9 +297,8 @@ export default {
 
   &__date {
     @include a-text-explanation-small();
-    position: absolute;
-    top: 16px;
-    right: 16px;
+    margin-left: 16px;
+    white-space: nowrap;
   }
 
   &__badge {