From 777c2529158df9b46a0628423c49901a99b4e177 Mon Sep 17 00:00:00 2001
From: Maybe <96062022+maybe-but-fly@users.noreply.github.com>
Date: Sat, 17 Jan 2026 16:56:55 +0900
Subject: [PATCH] fix(ui): refreshing the page if pressing enter in the search,
 horizontal scrolling the monitor lit on mobile/tablets and aligning items in
 the monitor list (#6751)

---
 src/components/MonitorList.vue     | 8 +++-----
 src/components/MonitorListItem.vue | 5 +++--
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index b541a8ad8..098c07286 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="shadow-box mb-3" :style="boxStyle">
+    <div class="shadow-box mb-3 p-0" :style="boxStyle">
         <div class="list-header">
             <div class="header-top">
                 <div class="select-checkbox-wrapper">
@@ -28,7 +28,7 @@
                     <a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
                         <font-awesome-icon icon="times" />
                     </a>
-                    <form>
+                    <form @submit.prevent>
                         <input
                             v-model="searchText"
                             class="form-control search-input"
@@ -89,7 +89,7 @@
         </div>
         <div
             ref="monitorList"
-            class="monitor-list"
+            class="monitor-list px-2"
             :class="{ scrollbar: scrollbar }"
             :style="monitorListStyle"
             data-testid="monitor-list"
@@ -536,7 +536,6 @@ export default {
 .list-header {
     border-bottom: 1px solid #dee2e6;
     border-radius: 10px 10px 0 0;
-    margin: -10px;
     margin-bottom: 10px;
     padding: 10px;
 
@@ -679,7 +678,6 @@ export default {
 
 @media (max-width: 770px) {
     .list-header {
-        margin: -20px;
         margin-bottom: 10px;
         padding: 5px;
     }
diff --git a/src/components/MonitorListItem.vue b/src/components/MonitorListItem.vue
index c67a4c905..4a675548f 100644
--- a/src/components/MonitorListItem.vue
+++ b/src/components/MonitorListItem.vue
@@ -24,12 +24,12 @@
             <router-link :to="monitorURL(monitor.id)" class="item" :class="{ disabled: !monitor.active }">
                 <div class="row">
                     <div
-                        class="col-9 col-xl-6 small-padding"
+                        class="col-9 col-xl-6 small-padding d-flex align-items-center"
                         :class="{
                             'monitor-item': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none',
                         }"
                     >
-                        <div class="info">
+                        <div class="info d-flex align-items-center gap-2">
                             <Uptime :monitor="monitor" type="24" :pill="true" />
                             <span v-if="hasChildren" class="collapse-padding" @click.prevent="changeCollapsed">
                                 <font-awesome-icon
@@ -383,6 +383,7 @@ export default {
 
     /* We don't want the padding change due to the border animated */
     .item {
+        padding: 12px 15px;
         transition: none !important;
     }