Andrey/uptime-kuma
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): improve monitor list readability on mobile

Browse Source
This commit is contained in:
Anurag Ekkati 2026-01-12 22:33:01 -08:00
parent d61cbbe56d
commit 6faf3c7624
3 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/MonitorListFilter.vue
View File

@ -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]" />

4
src/components/MonitorListItem.vue
View File

@ -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,7 @@
<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>

4
src/components/PublicGroupList.vue
View File

@ -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>