c-my/dozzle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): stop the alert form from jumping while previews load (#5032)

Browse Source 
Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Amir Raminfar
2026-09-06 06:45:37 -07:00
committed by GitHub
co-authored by Claude Opus 5
parent 50a14311e7
commit 3297713c63
5 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/components/Notification/AlertForm.vue
+3 -1
View File
@@ -56,7 +56,9 @@
:examples="containerExamples"
:get-hints="containerHints"
/>
<div class="mt-1 text-sm">
<!-- Fixed height: this line flips between a spinner, a match count and nothing at all
on every keystroke, and a collapsing line shoves the rest of the form around. -->
<div class="mt-1 min-h-5 text-sm">
<span v-if="isLoading && !containerResult" class="text-base-content/60">
<span class="loading loading-spinner loading-xs align-middle"></span>
{{ $t("notifications.alert-form.checking") }}
assets/components/Notification/EventAlertFields.vue
+6 -3
View File
@@ -35,7 +35,10 @@
</span>
</div>
<div v-if="samples.length" class="border-base-content/20 divide-base-content/10 divide-y rounded-lg border">
<div
v-if="samples.length"
class="border-base-content/20 divide-base-content/10 min-h-24 divide-y rounded-lg border"
>
<div
v-for="(sample, index) in samples"
:key="index"
@@ -57,8 +60,8 @@
{{ emptyStateMessage }}
</div>
<p v-if="samples.length" class="text-base-content/50 mt-1 text-xs">
{{ $t("notifications.alert-form.event-preview-note") }}
<p class="text-base-content/50 mt-1 min-h-4 text-xs">
<template v-if="samples.length">{{ $t("notifications.alert-form.event-preview-note") }}</template>
</p>
</div>
</template>
assets/components/Notification/ExpressionField.vue
+3 -1
View File
@@ -8,7 +8,9 @@
<div ref="editorRef" class="w-full"></div>
</div>
<p v-if="error" class="text-error mt-1 font-mono text-xs">{{ error }}</p>
<!-- Always present: the error arrives a debounce after typing stops, and letting it push
everything below it down makes the form jump mid-edit. -->
<p class="text-error mt-1 min-h-4 font-mono text-xs">{{ error }}</p>
<!-- Examples double as documentation: clicking one fills the editor. -->
<div v-if="examples.length" class="mt-2 flex flex-wrap items-center gap-1.5">
assets/components/Notification/LogAlertFields.vue
+4 -3
View File
@@ -31,15 +31,16 @@
:last-selected-item="undefined"
class="border-base-content/20 bg-base-200/40 h-64 overflow-hidden rounded-lg border"
/>
<!-- Same height as the log list so results appearing and disappearing don't resize the form. -->
<div
v-else
class="border-base-content/15 bg-base-content/[0.03] text-base-content/60 flex h-24 items-center justify-center rounded-lg border border-dashed px-4 text-center text-sm"
class="border-base-content/15 bg-base-content/[0.03] text-base-content/60 flex h-64 items-center justify-center rounded-lg border border-dashed px-4 text-center text-sm"
>
{{ emptyStateMessage }}
</div>
<p v-if="truncated" class="text-base-content/50 mt-1 text-xs">
{{ $t("notifications.alert-form.log-scan-note", scannedContainers) }}
<p class="text-base-content/50 mt-1 min-h-4 text-xs">
<template v-if="truncated">{{ $t("notifications.alert-form.log-scan-note", scannedContainers) }}</template>
</p>
</div>
</template>
assets/components/Notification/MetricAlertFields.vue
+5 -3
View File
@@ -44,7 +44,7 @@
</span>
</div>
<div v-if="samples.length" class="border-base-content/20 overflow-x-auto rounded-lg border">
<div v-if="samples.length" class="border-base-content/20 min-h-24 overflow-x-auto rounded-lg border">
<table class="table-sm table">
<thead>
<tr>
@@ -90,8 +90,10 @@
{{ emptyStateMessage }}
</div>
<p v-if="samples.length" class="text-base-content/50 mt-1 text-xs">
{{ $t("notifications.alert-form.metric-preview-note", { duration: windowLabel }) }}
<p class="text-base-content/50 mt-1 min-h-4 text-xs">
<template v-if="samples.length">{{
$t("notifications.alert-form.metric-preview-note", { duration: windowLabel })
}}</template>
</p>
</div>
</template>