homelab/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2026-06-23 04:10:12 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix(notifications): prevent alert card header overflow on mobile (#4756) (#4757)
Deploy VitePress site to Pages / build (push) Has been cancelled
Details
Deploy VitePress site to Pages / Deploy (push) Has been cancelled
Details
Push container / Push branches and PRs (push) Has been cancelled
Details
Test / Typecheck (push) Has been cancelled
Details
Test / JavaScript Tests (push) Has been cancelled
Details
Test / Go Tests (push) Has been cancelled
Details
Test / Go Staticcheck (push) Has been cancelled
Details
Test / Integration Tests (push) Has been cancelled
Details

Browse Source 
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Amir Raminfar
2026-05-28 17:58:36 -07:00
committed by GitHub
parent 6cdf81e4bb
commit 424abad60e
2 changed files with 25 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/components/HostMenu.vue
+7 -4
View File
@@ -54,10 +54,11 @@
<li v-for="host in hosts" :key="host.id">
<a
@click.prevent="setHost(host.id)"
class="auto-cols-[max-content_minmax(0,1fr)_max-content]"
:class="{ 'text-base-content/50 pointer-events-none': !host.available }"
>
<HostIcon :type="host.type" />
{{ host.name }}
<span class="truncate">{{ host.name }}</span>
<span class="badge badge-error badge-xs p-1.5" v-if="!host.available">offline</span>
</a>
</li>
@@ -89,10 +90,11 @@
<li v-for="host in groupHosts" :key="host.id">
<a
@click.prevent="setHost(host.id)"
class="auto-cols-[max-content_minmax(0,1fr)_max-content]"
:class="{ 'text-base-content/50 pointer-events-none': !host.available }"
>
<HostIcon :type="host.type" />
{{ host.name }}
<span class="truncate">{{ host.name }}</span>
<span class="badge badge-error badge-xs p-1.5" v-if="!host.available">offline</span>
</a>
</li>
@@ -103,10 +105,11 @@
<li v-for="host in groupHosts" :key="host.id">
<a
@click.prevent="setHost(host.id)"
class="auto-cols-[max-content_minmax(0,1fr)_max-content]"
:class="{ 'text-base-content/50 pointer-events-none': !host.available }"
>
<HostIcon :type="host.type" />
{{ host.name }}
<span class="truncate">{{ host.name }}</span>
<span class="badge badge-error badge-xs p-1.5" v-if="!host.available">offline</span>
</a>
</li>
@@ -147,7 +150,7 @@
active-class="menu-active"
@click.alt.stop.prevent="pinnedStore.pinContainer(item)"
:title="item.name"
class="group auto-cols-[content_max_auto_max-content_max-content]"
class="group auto-cols-[max-content_minmax(0,1fr)_max-content_max-content]"
>
<svg-spinners:ring-resize v-if="item.isNew" class="text-secondary w-2" />
<div
assets/components/Notification/AlertCard.vue
+18 -11
View File
@@ -6,13 +6,13 @@
>
<div class="card-body gap-4 p-5">
<!-- Header -->
<div class="flex items-start justify-between">
<div class="flex items-center gap-2">
<h4 class="flex items-center gap-2 text-lg font-semibold">
<mdi:chart-line v-if="alert.metricExpression" class="text-info" />
<mdi:bell-ring-outline v-else-if="alert.eventExpression" class="text-info" />
<mdi:text-box-outline v-else class="text-info" />
<span>{{ alert.name }}</span> <span class="text-sm font-light">→</span>
<div class="flex items-start justify-between gap-2">
<div class="flex min-w-0 flex-wrap items-center gap-2">
<h4 class="flex min-w-0 flex-wrap items-center gap-2 text-lg font-semibold">
<mdi:chart-line v-if="alert.metricExpression" class="text-info shrink-0" />
<mdi:bell-ring-outline v-else-if="alert.eventExpression" class="text-info shrink-0" />
<mdi:text-box-outline v-else class="text-info shrink-0" />
<span class="break-all">{{ alert.name }}</span> <span class="text-sm font-light">→</span>
<div class="group/dispatch dropdown dropdown-hover">
<div
tabindex="0"
@@ -48,7 +48,12 @@
</h4>
<span v-if="!alert.enabled" class="badge badge-warning badge-sm">{{ $t("notifications.alert.paused") }}</span>
</div>
<input type="checkbox" class="toggle toggle-primary" :checked="alert.enabled" @change="toggleEnabled" />
<input
type="checkbox"
class="toggle toggle-primary shrink-0"
:checked="alert.enabled"
@change="toggleEnabled"
/>
</div>
<!-- Expressions -->
@@ -78,8 +83,10 @@
</div>
<!-- Footer -->
<div class="border-base-content/10 text-base-content/80 flex items-center justify-between border-t pt-3 text-xs">
<div class="flex items-center gap-4">
<div
class="border-base-content/10 text-base-content/80 flex items-center justify-between gap-2 border-t pt-3 text-xs"
>
<div class="flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1">
<span>
{{ $t("notifications.alert.containers-count", { count: alert.triggeredContainers }) }}
</span>
@@ -90,7 +97,7 @@
{{ $t("notifications.alert.last-triggered", { time: formatTimeAgo(alert.lastTriggeredAt) }) }}
</span>
</div>
<div class="flex items-center gap-1">
<div class="flex shrink-0 items-center gap-1">
<button class="btn btn-ghost btn-square" @click="editAlert">
<mdi:pencil-outline />
</button>