From 27d5fec0311233a3f1cf1121f53e241e79f48e0a Mon Sep 17 00:00:00 2001
From: JasonReed-2 <Jreed21649@gmail.com>
Date: Mon, 16 Oct 2023 20:40:07 -0500
Subject: [PATCH] Added horizontal scrolling to the DMs

---
 src/renderer/components/navbar/Messages.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/navbar/Messages.vue b/src/renderer/components/navbar/Messages.vue
index 819f8bcc..78287a7c 100644
--- a/src/renderer/components/navbar/Messages.vue
+++ b/src/renderer/components/navbar/Messages.vue
@@ -3,7 +3,7 @@
         <TabView v-model:activeIndex="activeTabIndex" class="messages-tabview">
             <TabPanel v-for="[userId, messages] of directMessages" :key="userId">
                 <template #header>
-                    <div class="flex-row">
+                    <div class="tab-header">
                         <div>{{ getUsername(userId) }}</div>
                         <div class="flex-row close" @click="close(userId)">
                             <Icon :icon="closeThick" />
@@ -162,6 +162,15 @@ function close(userId: number) {
     flex-grow: 1;
     padding: 0 !important;
 }
+
+:deep(.p-tabview-header) {
+    flex-shrink: 0;
+}
+
+:deep(.p-tabview-nav) {
+    overflow-x: auto;
+}
+
 :deep(.p-tabview-header-action) {
     overflow: unset;
 }
@@ -210,4 +219,7 @@ function close(userId: number) {
         opacity: 1;
     }
 }
+.tab-header {
+    min-width: 100px;
+}
 </style>