From 70d541a11ce212109c65b33e26dbcc15a3c79c23 Mon Sep 17 00:00:00 2001
From: Anurag Ekkati <anurag.ekkati@gmail.com>
Date: Tue, 13 Jan 2026 00:38:52 -0800
Subject: [PATCH] fix(ui): improve monitor list readability on mobile (#6699)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Frank Elsinga <frank@elsinga.de>
---
 src/components/MonitorListFilter.vue | 2 +-
 src/components/MonitorListItem.vue   | 8 ++++++--
 src/components/PublicGroupList.vue   | 4 ++--
 src/pages/Dashboard.vue              | 2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/MonitorListFilter.vue b/src/components/MonitorListFilter.vue
index ff8793f27..a69a0db98 100644
--- a/src/components/MonitorListFilter.vue
+++ b/src/components/MonitorListFilter.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="d-flex align-items-center">
+    <div class="d-flex align-items-center flex-wrap gap-1">
         <MonitorListFilterDropdown :filterActive="filterState.status?.length > 0">
             <template #status>
                 <Status v-if="filterState.status?.length === 1" :status="filterState.status[0]" />
diff --git a/src/components/MonitorListItem.vue b/src/components/MonitorListItem.vue
index ec84ef732..c67a4c905 100644
--- a/src/components/MonitorListItem.vue
+++ b/src/components/MonitorListItem.vue
@@ -24,7 +24,7 @@
             <router-link :to="monitorURL(monitor.id)" class="item" :class="{ disabled: !monitor.active }">
                 <div class="row">
                     <div
-                        class="col-6 small-padding"
+                        class="col-9 col-xl-6 small-padding"
                         :class="{
                             'monitor-item': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none',
                         }"
@@ -44,7 +44,11 @@
                             <Tag v-for="tag in monitor.tags" :key="tag" :item="tag" :size="'sm'" />
                         </div>
                     </div>
-                    <div v-show="$root.userHeartbeatBar == 'normal'" :key="$root.userHeartbeatBar" class="col-6">
+                    <div
+                        v-show="$root.userHeartbeatBar == 'normal'"
+                        :key="$root.userHeartbeatBar"
+                        class="col-3 col-xl-6"
+                    >
                         <HeartbeatBar ref="heartbeatBar" size="small" :monitor-id="monitor.id" />
                     </div>
                 </div>
diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index acc2bbb23..f42a42c7f 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -51,7 +51,7 @@
                         <template #item="monitor">
                             <div class="item" data-testid="monitor">
                                 <div class="row">
-                                    <div class="col-6 small-padding">
+                                    <div class="col-9 col-xl-6 small-padding">
                                         <div class="info">
                                             <font-awesome-icon
                                                 v-if="editMode"
@@ -116,7 +116,7 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <div :key="$root.userHeartbeatBar" class="col-6">
+                                    <div :key="$root.userHeartbeatBar" class="col-3 col-xl-6">
                                         <HeartbeatBar size="mid" :monitor-id="monitor.element.id" />
                                     </div>
                                 </div>
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index 7cf2c14b2..9cc682459 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -11,7 +11,7 @@
                 <MonitorList :scrollbar="true" />
             </div>
 
-            <div ref="container" class="col-12 col-md-7 col-xl-8 mb-3">
+            <div ref="container" class="col-12 col-md-7 col-xl-8 mb-3 gx-0">
                 <!-- Add :key to disable vue router re-use the same component -->
                 <router-view :key="$route.fullPath" :calculatedHeight="height" />
             </div>