From 18331eaf3323199daf24fca43a8971a8479415de Mon Sep 17 00:00:00 2001
From: Dorian Grasset <doriangrasset@proton.me>
Date: Sat, 17 Jan 2026 13:38:10 +0100
Subject: [PATCH 1/2] refactor: simplify filters components (#6749)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Frank Elsinga <frank@elsinga.de>
---
 src/components/MonitorList.vue               | 123 ++++----
 src/components/MonitorListFilter.vue         | 289 +++++++++++--------
 src/components/MonitorListFilterDropdown.vue |   2 +-
 3 files changed, 236 insertions(+), 178 deletions(-)

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index 098c07286..ed354e3a0 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -1,8 +1,24 @@
 <template>
     <div class="shadow-box mb-3 p-0" :style="boxStyle">
         <div class="list-header">
-            <div class="header-top">
-                <div class="select-checkbox-wrapper">
+            <!-- Line 1: Checkbox + Status + Tags + Search Bar -->
+            <div class="filter-row">
+                <div class="search-wrapper">
+                    <a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
+                        <font-awesome-icon icon="times" />
+                    </a>
+                    <form @submit.prevent>
+                        <input
+                            v-model="searchText"
+                            class="form-control search-input"
+                            :placeholder="$t('Search...')"
+                            :aria-label="$t('Search monitored sites')"
+                            autocomplete="off"
+                        />
+                    </form>
+                </div>
+
+                <div class="filters-group">
                     <input
                         v-if="!selectMode"
                         v-model="selectMode"
@@ -18,33 +34,17 @@
                         type="checkbox"
                         :aria-label="selectAll ? $t('deselectAllMonitorsAria') : $t('selectAllMonitorsAria')"
                     />
-                </div>
 
-                <div class="header-filter">
                     <MonitorListFilter :filterState="filterState" @update-filter="updateFilter" />
                 </div>
-
-                <div class="search-wrapper ms-auto">
-                    <a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
-                        <font-awesome-icon icon="times" />
-                    </a>
-                    <form @submit.prevent>
-                        <input
-                            v-model="searchText"
-                            class="form-control search-input"
-                            :placeholder="$t('Search...')"
-                            :aria-label="$t('Search monitored sites')"
-                            autocomplete="off"
-                        />
-                    </form>
-                </div>
             </div>
 
-            <div v-if="selectMode && selectedMonitorCount > 0" class="selected-count-row">
+            <!-- Line 2: Cancel + Actions (shown when selection mode is active) -->
+            <div v-if="selectMode && selectedMonitorCount > 0" class="selection-row">
                 <button class="btn btn-outline-normal" @click="cancelSelectMode">
                     {{ $t("Cancel") }}
                 </button>
-                <div class="actions-wrapper ms-2">
+                <div class="actions-wrapper">
                     <div class="dropdown">
                         <button
                             class="btn btn-outline-normal dropdown-toggle"
@@ -82,7 +82,7 @@
                         </ul>
                     </div>
                 </div>
-                <span class="selected-count ms-2">
+                <span class="selected-count">
                     {{ $t("selectedMonitorCountMsg", selectedMonitorCount) }}
                 </span>
             </div>
@@ -538,6 +538,9 @@ export default {
     border-radius: 10px 10px 0 0;
     margin-bottom: 10px;
     padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
 
     .dark & {
         background-color: $dark-header-bg;
@@ -545,37 +548,26 @@ export default {
     }
 }
 
-.search-row {
-    display: flex;
-    padding: 10px;
-    padding-bottom: 5px;
-}
-
-.header-top {
+.filter-row {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     gap: 8px;
-    padding: 10px;
-
-    @media (max-width: 549px), (min-width: 770px) and (max-width: 1149px), (min-width: 1200px) and (max-width: 1499px) {
-        flex-wrap: wrap;
-    }
-}
-
-.select-checkbox-wrapper {
-    display: flex;
-    align-items: center;
+    flex-wrap: nowrap;
+    width: 100%;
 
     .form-check-input {
         cursor: pointer;
         margin: 0;
+        margin-left: 6px;
+        flex-shrink: 0;
     }
 }
 
-.header-filter {
+.filters-group {
     display: flex;
     align-items: center;
+    gap: 8px;
 }
 
 .actions-wrapper {
@@ -642,6 +634,13 @@ export default {
     }
 }
 
+.selection-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+}
+
 .selected-count {
     white-space: nowrap;
     font-size: 0.9em;
@@ -652,8 +651,7 @@ export default {
     }
 }
 
-.selected-count-row {
-    padding: 5px 10px 0 10px;
+.actions-row {
     display: flex;
     align-items: center;
 }
@@ -676,10 +674,29 @@ export default {
     }
 }
 
+@media (max-width: 975px) {
+    .filter-row {
+        flex-direction: column-reverse;
+        align-items: stretch;
+        gap: 8px;
+    }
+
+    .search-wrapper {
+        width: 100% !important;
+        max-width: 100% !important;
+        margin-left: 0 !important;
+        flex: 1 1 100%;
+    }
+
+    .filters-group {
+        width: 100%;
+    }
+}
+
 @media (max-width: 770px) {
     .list-header {
         margin-bottom: 10px;
-        padding: 5px;
+        padding: 20px;
     }
 }
 
@@ -687,15 +704,14 @@ export default {
     display: flex;
     align-items: center;
     position: relative;
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: 300px;
+    margin-left: auto;
+    order: 1;
 
-    @media (max-width: 549px), (min-width: 770px) and (max-width: 1149px), (min-width: 1200px) and (max-width: 1499px) {
-        order: -1;
+    form {
         width: 100%;
-        margin-bottom: 8px;
-
-        form {
-            width: 100%;
-        }
     }
 }
 
@@ -713,13 +729,8 @@ export default {
 }
 
 .search-input {
-    max-width: 15em;
+    width: 100%;
     padding-right: 30px;
-
-    @media (max-width: 549px), (min-width: 770px) and (max-width: 1149px), (min-width: 1200px) and (max-width: 1499px) {
-        max-width: 100%;
-        width: 100%;
-    }
 }
 
 .monitor-item {
diff --git a/src/components/MonitorListFilter.vue b/src/components/MonitorListFilter.vue
index a69a0db98..1635c3353 100644
--- a/src/components/MonitorListFilter.vue
+++ b/src/components/MonitorListFilter.vue
@@ -1,139 +1,142 @@
 <template>
-    <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]" />
-                <span v-else>
-                    {{ $t("Status") }}
-                </span>
-            </template>
-            <template #dropdown>
-                <li>
-                    <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(1)">
-                        <div class="d-flex align-items-center justify-content-between">
-                            <Status :status="1" />
-                            <span class="ps-3">
-                                {{ $root.stats.up }}
-                                <span v-if="filterState.status?.includes(1)" class="px-1 filter-active">
-                                    <font-awesome-icon icon="check" />
-                                </span>
+    <MonitorListFilterDropdown :filterActive="filterState.status?.length > 0 || filterState.active?.length > 0">
+        <template #status>
+            <Status
+                v-if="filterState.status?.length === 1 && !filterState.active?.length"
+                :status="filterState.status[0]"
+            />
+            <span
+                v-else-if="!filterState.status?.length && filterState.active?.length === 1"
+                class="badge status-pill"
+                :class="filterState.active[0] ? 'running' : 'paused'"
+            >
+                <font-awesome-icon :icon="filterState.active[0] ? 'play' : 'pause'" class="icon-small" />
+                {{ filterState.active[0] ? $t("Running") : $t("filterActivePaused") }}
+            </span>
+            <span v-else>
+                {{ $t("Status") }}
+            </span>
+        </template>
+        <template #dropdown>
+            <li>
+                <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(1)">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <Status :status="1" />
+                        <span class="ps-3">
+                            {{ $root.stats.up }}
+                            <span v-if="filterState.status?.includes(1)" class="px-1 filter-active">
+                                <font-awesome-icon icon="check" />
                             </span>
-                        </div>
+                        </span>
                     </div>
-                </li>
-                <li>
-                    <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(0)">
-                        <div class="d-flex align-items-center justify-content-between">
-                            <Status :status="0" />
-                            <span class="ps-3">
-                                {{ $root.stats.down }}
-                                <span v-if="filterState.status?.includes(0)" class="px-1 filter-active">
-                                    <font-awesome-icon icon="check" />
-                                </span>
+                </div>
+            </li>
+            <li>
+                <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(0)">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <Status :status="0" />
+                        <span class="ps-3">
+                            {{ $root.stats.down }}
+                            <span v-if="filterState.status?.includes(0)" class="px-1 filter-active">
+                                <font-awesome-icon icon="check" />
                             </span>
-                        </div>
+                        </span>
                     </div>
-                </li>
-                <li>
-                    <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(2)">
-                        <div class="d-flex align-items-center justify-content-between">
-                            <Status :status="2" />
-                            <span class="ps-3">
-                                {{ $root.stats.pending }}
-                                <span v-if="filterState.status?.includes(2)" class="px-1 filter-active">
-                                    <font-awesome-icon icon="check" />
-                                </span>
+                </div>
+            </li>
+            <li>
+                <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(2)">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <Status :status="2" />
+                        <span class="ps-3">
+                            {{ $root.stats.pending }}
+                            <span v-if="filterState.status?.includes(2)" class="px-1 filter-active">
+                                <font-awesome-icon icon="check" />
                             </span>
-                        </div>
+                        </span>
                     </div>
-                </li>
-                <li>
-                    <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(3)">
-                        <div class="d-flex align-items-center justify-content-between">
-                            <Status :status="3" />
-                            <span class="ps-3">
-                                {{ $root.stats.maintenance }}
-                                <span v-if="filterState.status?.includes(3)" class="px-1 filter-active">
-                                    <font-awesome-icon icon="check" />
-                                </span>
+                </div>
+            </li>
+            <li>
+                <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(3)">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <Status :status="3" />
+                        <span class="ps-3">
+                            {{ $root.stats.maintenance }}
+                            <span v-if="filterState.status?.includes(3)" class="px-1 filter-active">
+                                <font-awesome-icon icon="check" />
                             </span>
-                        </div>
+                        </span>
                     </div>
-                </li>
-            </template>
-        </MonitorListFilterDropdown>
-        <MonitorListFilterDropdown :filterActive="filterState.active?.length > 0">
-            <template #status>
-                <span v-if="filterState.active?.length === 1">
-                    <span v-if="filterState.active[0]">{{ $t("Running") }}</span>
-                    <span v-else>{{ $t("filterActivePaused") }}</span>
-                </span>
-                <span v-else>
-                    {{ $t("filterActive") }}
-                </span>
-            </template>
-            <template #dropdown>
-                <li>
-                    <div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(true)">
-                        <div class="d-flex align-items-center justify-content-between">
-                            <span>{{ $t("Running") }}</span>
-                            <span class="ps-3">
-                                {{ $root.stats.active }}
-                                <span v-if="filterState.active?.includes(true)" class="px-1 filter-active">
-                                    <font-awesome-icon icon="check" />
-                                </span>
+                </div>
+            </li>
+            <li><hr class="dropdown-divider" /></li>
+            <li>
+                <div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(true)">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <span class="badge status-pill running">
+                            <font-awesome-icon icon="play" class="icon-small" />
+                            {{ $t("Running") }}
+                        </span>
+                        <span class="ps-3">
+                            {{ $root.stats.active }}
+                            <span v-if="filterState.active?.includes(true)" class="px-1 filter-active">
+                                <font-awesome-icon icon="check" />
                             </span>
-                        </div>
+                        </span>
                     </div>
-                </li>
-                <li>
-                    <div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(false)">
-                        <div class="d-flex align-items-center justify-content-between">
-                            <span>{{ $t("filterActivePaused") }}</span>
-                            <span class="ps-3">
-                                {{ $root.stats.pause }}
-                                <span v-if="filterState.active?.includes(false)" class="px-1 filter-active">
-                                    <font-awesome-icon icon="check" />
-                                </span>
+                </div>
+            </li>
+            <li>
+                <div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(false)">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <span class="badge status-pill paused">
+                            <font-awesome-icon icon="pause" class="icon-small" />
+                            {{ $t("filterActivePaused") }}
+                        </span>
+                        <span class="ps-3">
+                            {{ $root.stats.pause }}
+                            <span v-if="filterState.active?.includes(false)" class="px-1 filter-active">
+                                <font-awesome-icon icon="check" />
                             </span>
-                        </div>
+                        </span>
                     </div>
-                </li>
-            </template>
-        </MonitorListFilterDropdown>
-        <MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0">
-            <template #status>
-                <Tag
-                    v-if="filterState.tags?.length === 1"
-                    :item="tagsList.find((tag) => tag.id === filterState.tags[0])"
-                    :size="'sm'"
-                />
-                <span v-else>
-                    {{ $t("Tags") }}
-                </span>
-            </template>
-            <template #dropdown>
-                <li v-for="tag in tagsList" :key="tag.id">
-                    <div class="dropdown-item" tabindex="0" @click.stop="toggleTagFilter(tag)">
-                        <div class="d-flex align-items-center justify-content-between">
-                            <span><Tag :item="tag" :size="'sm'" /></span>
-                            <span class="ps-3">
-                                {{ getTaggedMonitorCount(tag) }}
-                                <span v-if="filterState.tags?.includes(tag.id)" class="px-1 filter-active">
-                                    <font-awesome-icon icon="check" />
-                                </span>
+                </div>
+            </li>
+        </template>
+    </MonitorListFilterDropdown>
+    <MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0">
+        <template #status>
+            <Tag
+                v-if="filterState.tags?.length === 1"
+                :item="tagsList.find((tag) => tag.id === filterState.tags[0])"
+                :size="'sm'"
+            />
+            <span v-else>
+                {{ $t("Tags") }}
+            </span>
+        </template>
+        <template #dropdown>
+            <li v-for="tag in tagsList" :key="tag.id">
+                <div class="dropdown-item" tabindex="0" @click.stop="toggleTagFilter(tag)">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <span><Tag :item="tag" :size="'sm'" /></span>
+                        <span class="ps-3">
+                            {{ getTaggedMonitorCount(tag) }}
+                            <span v-if="filterState.tags?.includes(tag.id)" class="px-1 filter-active">
+                                <font-awesome-icon icon="check" />
                             </span>
-                        </div>
+                        </span>
                     </div>
-                </li>
-                <li v-if="tagsList.length === 0">
-                    <div class="dropdown-item disabled px-3">
-                        {{ $t("No tags found.") }}
-                    </div>
-                </li>
-            </template>
-        </MonitorListFilterDropdown>
-    </div>
+                </div>
+            </li>
+            <li v-if="tagsList.length === 0">
+                <div class="dropdown-item disabled px-3">
+                    {{ $t("No tags found.") }}
+                </div>
+            </li>
+        </template>
+    </MonitorListFilterDropdown>
 </template>
 
 <script>
@@ -252,6 +255,17 @@ export default {
     cursor: pointer;
 }
 
+.simple-status {
+    min-width: 64px;
+    border: 1px solid #d1d5db;
+    background-color: transparent !important;
+    color: inherit !important;
+
+    .dark & {
+        border-color: #6b7280;
+    }
+}
+
 .clear-filters-btn {
     font-size: 0.8em;
     margin-right: 5px;
@@ -275,4 +289,37 @@ export default {
         }
     }
 }
+
+.dropdown-divider {
+    margin: 0.5rem 0;
+    border-top: 1px solid #d1d5db;
+
+    .dark & {
+        border-top-color: #6b7280;
+    }
+}
+
+.status-pill {
+    min-width: 64px;
+    display: inline-block;
+    text-align: center;
+
+    &.running,
+    &.paused {
+        background-color: white !important;
+        border: 1px solid #d1d5db;
+        color: inherit;
+
+        .dark & {
+            background-color: transparent !important;
+            border-color: #6b7280;
+            color: $dark-font-color;
+        }
+
+        .icon-small {
+            font-size: 0.75em;
+            margin-right: 4px;
+        }
+    }
+}
 </style>
diff --git a/src/components/MonitorListFilterDropdown.vue b/src/components/MonitorListFilterDropdown.vue
index dbd056af6..29906cb53 100644
--- a/src/components/MonitorListFilterDropdown.vue
+++ b/src/components/MonitorListFilterDropdown.vue
@@ -103,7 +103,7 @@ export default {
     @extend .btn-outline-normal;
     display: flex;
     align-items: center;
-    margin-left: 5px;
+    margin-left: 0;
     color: $link-color;
 
     .dark & {

From b926446a5c327feeac639a3067450f4877a9fadc Mon Sep 17 00:00:00 2001
From: bitloi <89318445+bitloi@users.noreply.github.com>
Date: Sat, 17 Jan 2026 09:05:58 -0500
Subject: [PATCH 2/2] feat: add screenshot delay option for Browser Engine
 monitor (#6753)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Frank Elsinga <frank@elsinga.de>
---
 .../2026-01-16-0000-add-screenshot-delay.js   | 11 +++++++
 server/model/monitor.js                       | 22 +++++++++++++
 .../real-browser-monitor-type.js              |  5 +++
 src/lang/en.json                              |  4 +++
 src/pages/EditMonitor.vue                     | 31 +++++++++++++++++++
 5 files changed, 73 insertions(+)
 create mode 100644 db/knex_migrations/2026-01-16-0000-add-screenshot-delay.js

diff --git a/db/knex_migrations/2026-01-16-0000-add-screenshot-delay.js b/db/knex_migrations/2026-01-16-0000-add-screenshot-delay.js
new file mode 100644
index 000000000..fa0829bdf
--- /dev/null
+++ b/db/knex_migrations/2026-01-16-0000-add-screenshot-delay.js
@@ -0,0 +1,11 @@
+exports.up = function (knex) {
+    return knex.schema.alterTable("monitor", function (table) {
+        table.integer("screenshot_delay").notNullable().unsigned().defaultTo(0);
+    });
+};
+
+exports.down = function (knex) {
+    return knex.schema.alterTable("monitor", function (table) {
+        table.dropColumn("screenshot_delay");
+    });
+};
diff --git a/server/model/monitor.js b/server/model/monitor.js
index e01977133..2a23abd2f 100644
--- a/server/model/monitor.js
+++ b/server/model/monitor.js
@@ -1764,6 +1764,28 @@ class Monitor extends BeanModel {
                 this.timeout = pingGlobalTimeout;
             }
         }
+
+        if (this.type === "real-browser") {
+            // screenshot_delay validation
+            if (this.screenshot_delay !== undefined && this.screenshot_delay !== null) {
+                const delay = Number(this.screenshot_delay);
+                if (isNaN(delay) || delay < 0) {
+                    throw new Error("Screenshot delay must be a non-negative number");
+                }
+
+                // Must not exceed 0.8 * timeout (page.goto timeout is interval * 1000 * 0.8)
+                const maxDelayFromTimeout = this.interval * 1000 * 0.8;
+                if (delay >= maxDelayFromTimeout) {
+                    throw new Error(`Screenshot delay must be less than ${maxDelayFromTimeout}ms (0.8 × interval)`);
+                }
+
+                // Must not exceed 0.5 * interval to prevent blocking next check
+                const maxDelayFromInterval = this.interval * 1000 * 0.5;
+                if (delay >= maxDelayFromInterval) {
+                    throw new Error(`Screenshot delay must be less than ${maxDelayFromInterval}ms (0.5 × interval)`);
+                }
+            }
+        }
     }
 
     /**
diff --git a/server/monitor-types/real-browser-monitor-type.js b/server/monitor-types/real-browser-monitor-type.js
index 2b62a10a3..32fa36f1a 100644
--- a/server/monitor-types/real-browser-monitor-type.js
+++ b/server/monitor-types/real-browser-monitor-type.js
@@ -269,6 +269,11 @@ class RealBrowserMonitorType extends MonitorType {
             timeout: monitor.interval * 1000 * 0.8,
         });
 
+        // Wait for additional time before taking screenshot if configured
+        if (monitor.screenshot_delay > 0) {
+            await page.waitForTimeout(monitor.screenshot_delay);
+        }
+
         let filename = jwt.sign(monitor.id, server.jwtSecret) + ".png";
 
         await page.screenshot({
diff --git a/src/lang/en.json b/src/lang/en.json
index 4c8ebffa8..72e8beaa6 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -1055,6 +1055,10 @@
     "remoteBrowserToggle": "By default Chromium runs inside the Uptime Kuma container. You can use a remote browser by toggling this switch.",
     "useRemoteBrowser": "Use a Remote Browser",
     "deleteRemoteBrowserMessage": "Are you sure want to delete this Remote Browser for all monitors?",
+    "Screenshot Delay": "Screenshot Delay (waits {milliseconds})",
+    "milliseconds": "{n} millisecond | {n} milliseconds",
+    "screenshotDelayDescription": "Optionally wait this many milliseconds before taking the screenshot. Maximum: {maxValueMs}ms (0.5 × interval).",
+    "screenshotDelayWarning": "Higher values keep the browser open longer, which may increase memory usage with many concurrent monitors.",
     "GrafanaOncallUrl": "Grafana Oncall URL",
     "systemService": "System Service",
     "systemServiceName": "Service Name",
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index 9531210d1..6cb93c19e 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -1263,6 +1263,36 @@
                                 <div class="form-text"></div>
                             </div>
 
+                            <!-- Screenshot Delay - Real Browser only -->
+                            <div v-if="monitor.type === 'real-browser'" class="my-3">
+                                <label for="screenshot-delay" class="form-label">
+                                    {{
+                                        $t("Screenshot Delay", {
+                                            milliseconds: $t("milliseconds", monitor.screenshot_delay),
+                                        })
+                                    }}
+                                </label>
+                                <input
+                                    id="screenshot-delay"
+                                    v-model="monitor.screenshot_delay"
+                                    type="number"
+                                    class="form-control"
+                                    min="0"
+                                    :max="Math.floor(monitor.interval * 1000 * 0.5)"
+                                    step="100"
+                                />
+                                <div class="form-text">
+                                    {{
+                                        $t("screenshotDelayDescription", {
+                                            maxValueMs: Math.floor(monitor.interval * 1000 * 0.5),
+                                        })
+                                    }}
+                                </div>
+                                <div v-if="monitor.screenshot_delay" class="form-text text-warning">
+                                    {{ $t("screenshotDelayWarning") }}
+                                </div>
+                            </div>
+
                             <div v-if="showDomainExpiryNotification" class="my-3 form-check">
                                 <input
                                     id="domain-expiry-notification"
@@ -2293,6 +2323,7 @@ const monitorDefaults = {
     kafkaProducerAllowAutoTopicCreation: false,
     gamedigGivenPortOnly: true,
     remote_browser: null,
+    screenshot_delay: 0,
     rabbitmqNodes: [],
     rabbitmqUsername: "",
     rabbitmqPassword: "",