From 2c31fd2f9b912e9b5330b79adcbc8d6a3e5ad840 Mon Sep 17 00:00:00 2001
From: Jay Bhanushali <jaybhanushali3166@gmail.com>
Date: Fri, 8 Dec 2023 23:37:24 +0530
Subject: [PATCH 1/3] issue: 3293, media queries for dashboard table name
 column

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

diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index 3baf35a6..fa2ef852 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -42,7 +42,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>
@@ -218,4 +218,25 @@ table {
         overflow-wrap: break-word;
     }
 }
+
+/* Styles for tablets */
+@media (min-width: 576px) and (max-width: 1023px) {
+  .name-column {
+    min-width: 100px;
+  }
+}
+
+/* Styles for screens between 1024px and 1440px */
+@media (min-width: 1024px) and (max-width: 1439px) {
+  .name-column {
+    min-width: 120px;
+  }
+}
+
+/* Styles for screens 1440px and wider */
+@media (min-width: 1440px) {
+  .name-column {
+    min-width: 200px; 
+    }
+}
 </style>

From 750fae1744d99697f4d0cffaacb86b51e4caa93c Mon Sep 17 00:00:00 2001
From: Jay Bhanushali <jaybhanushali3166@gmail.com>
Date: Sat, 9 Dec 2023 00:46:07 +0530
Subject: [PATCH 2/3] indentation corrected

---
 src/pages/DashboardHome.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index fa2ef852..2af98e2e 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -221,22 +221,22 @@ table {
 
 /* Styles for tablets */
 @media (min-width: 576px) and (max-width: 1023px) {
-  .name-column {
-    min-width: 100px;
-  }
+    .name-column {
+        min-width: 100px;
+    }
 }
 
 /* Styles for screens between 1024px and 1440px */
 @media (min-width: 1024px) and (max-width: 1439px) {
-  .name-column {
-    min-width: 120px;
-  }
+    .name-column {
+        min-width: 120px;
+    }
 }
 
 /* Styles for screens 1440px and wider */
 @media (min-width: 1440px) {
-  .name-column {
-    min-width: 200px; 
+    .name-column {
+        min-width: 200px;
     }
 }
 </style>

From a3b3a8cae0ebce29f05afdc9005a2670dfef24c7 Mon Sep 17 00:00:00 2001
From: Jay Bhanushali <jaybhanushali3166@gmail.com>
Date: Sat, 9 Dec 2023 03:15:51 +0530
Subject: [PATCH 3/3] updated breakpoints for 4/3 aspect ratio and 1280
 resolution

---
 src/pages/DashboardHome.vue | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index 2af98e2e..b7b36bb8 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -219,22 +219,13 @@ table {
     }
 }
 
-/* Styles for tablets */
-@media (min-width: 576px) and (max-width: 1023px) {
+@media screen and (max-width: 1280px) {
     .name-column {
-        min-width: 100px;
+        min-width: 150px;
     }
 }
 
-/* Styles for screens between 1024px and 1440px */
-@media (min-width: 1024px) and (max-width: 1439px) {
-    .name-column {
-        min-width: 120px;
-    }
-}
-
-/* Styles for screens 1440px and wider */
-@media (min-width: 1440px) {
+@media screen and (min-aspect-ratio: 4/3) {
     .name-column {
         min-width: 200px;
     }