From 3e88772e5d18513fbc273aa0016ab2642e52d334 Mon Sep 17 00:00:00 2001
From: Jay Bhanushali <50731710+jaybhanushali3166@users.noreply.github.com>
Date: Sat, 24 Aug 2024 23:14:51 +0530
Subject: [PATCH] Fix: name column in the dashboad being squashed in some
 aspect ratios  (#4193)

---
 src/pages/DashboardHome.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index 78bee91f..a00dedb9 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -57,7 +57,7 @@
                     </thead>
                     <tbody>
                         <tr v-for="(beat, index) in displayedRecords" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}">
-                            <td><router-link :to="`/dashboard/${beat.monitorID}`">{{ $root.monitorList[beat.monitorID]?.name }}</router-link></td>
+                            <td class="name-column"><router-link :to="`/dashboard/${beat.monitorID}`">{{ $root.monitorList[beat.monitorID]?.name }}</router-link></td>
                             <td><Status :status="beat.status" /></td>
                             <td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" /></td>
                             <td class="border-0">{{ beat.msg }}</td>
@@ -233,4 +233,16 @@ table {
         overflow-wrap: break-word;
     }
 }
+
+@media screen and (max-width: 1280px) {
+    .name-column {
+        min-width: 150px;
+    }
+}
+
+@media screen and (min-aspect-ratio: 4/3) {
+    .name-column {
+        min-width: 200px;
+    }
+}
 </style>