From f0e43ecfbbba6593ad044250908c1a99e034b906 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Ant=C3=B4nio=20Cardoso?= <joao.maker@gmail.com>
Date: Tue, 24 Mar 2026 12:41:00 -0300
Subject: [PATCH 1/3] frontend: components: video-manager: VideoThumbnail: stop
 click propagation on controls

Prevents the play/camera buttons from triggering navigation to the
Video Manager page when the thumbnail is embedded in the dashboard.

Closes #3848
---
 core/frontend/src/components/video-manager/VideoThumbnail.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/frontend/src/components/video-manager/VideoThumbnail.vue b/core/frontend/src/components/video-manager/VideoThumbnail.vue
index 72bbe68331..e5205ad69a 100644
--- a/core/frontend/src/components/video-manager/VideoThumbnail.vue
+++ b/core/frontend/src/components/video-manager/VideoThumbnail.vue
@@ -60,6 +60,7 @@
       <div
         v-if="register"
         class="thumbnail-controls d-flex align-center"
+        @click.stop.prevent
       >
         <v-tooltip bottom>
           <template #activator="{ on, attrs }">

From 966a8c5664792802dcabfe28ab8e1a481147291b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Ant=C3=B4nio=20Cardoso?= <joao.maker@gmail.com>
Date: Tue, 24 Mar 2026 12:42:20 -0300
Subject: [PATCH 2/3] frontend: fix dashboard thumbnail sizing to fill card
 width

The width prop was concatenated with 'px' unconditionally, producing
invalid CSS 'autopx' when the dashboard passed 'auto'. Add a computed
that only appends 'px' for purely numeric values, and pass '100%' from
the dashboard so the thumbnail fills the card like it does on the
Video Manager page.
---
 .../frontend/src/components/video-manager/VideoThumbnail.vue | 5 ++++-
 core/frontend/src/views/MainView.vue                         | 3 +--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/core/frontend/src/components/video-manager/VideoThumbnail.vue b/core/frontend/src/components/video-manager/VideoThumbnail.vue
index e5205ad69a..f271202885 100644
--- a/core/frontend/src/components/video-manager/VideoThumbnail.vue
+++ b/core/frontend/src/components/video-manager/VideoThumbnail.vue
@@ -2,7 +2,7 @@
   <v-container class="d-flex flex-column align-center justify-space-between">
     <div
       class="thumbnail-frame d-flex align-center justify-center"
-      :style="{ width: width + 'px', aspectRatio: '16 / 9' }"
+      :style="{ width: parsedWidth, aspectRatio: '16 / 9' }"
     >
       <span
         v-if="disabled"
@@ -156,6 +156,9 @@ export default Vue.extend({
       return this.register && this.thumbnail === undefined
         && !this.continuous_mode && !this.snapshot_in_progress
     },
+    parsedWidth(): string {
+      return /^\d+$/.test(this.width) ? `${this.width}px` : this.width
+    },
     is_pirate_mode(): boolean {
       return settings.is_pirate_mode
     },
diff --git a/core/frontend/src/views/MainView.vue b/core/frontend/src/views/MainView.vue
index 7d7f3e0f21..b53c382b8d 100644
--- a/core/frontend/src/views/MainView.vue
+++ b/core/frontend/src/views/MainView.vue
@@ -220,8 +220,7 @@ export default Vue.extend({
           props: {
             source,
             register: stream.running,
-            width: 'auto',
-            height: '100%',
+            width: '100%',
           },
           style: {
             display: 'flex',

From d375166e9df07935a8d55a453cb60b8902668ea5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Ant=C3=B4nio=20Cardoso?= <joao.maker@gmail.com>
Date: Tue, 24 Mar 2026 12:51:54 -0300
Subject: [PATCH 3/3] frontend: components: video-manager: VideoThumbnail:
 contain image within parent

Constrain the thumbnail frame height to its parent and use object-fit
contain so the full image is visible without overflow or cropping.
---
 core/frontend/src/components/video-manager/VideoThumbnail.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/core/frontend/src/components/video-manager/VideoThumbnail.vue b/core/frontend/src/components/video-manager/VideoThumbnail.vue
index f271202885..68ab7a3f71 100644
--- a/core/frontend/src/components/video-manager/VideoThumbnail.vue
+++ b/core/frontend/src/components/video-manager/VideoThumbnail.vue
@@ -33,7 +33,7 @@
       <img
         v-else
         :src="thumbnail?.source"
-        style="width: 100%; height: 100%; object-fit: cover;"
+        style="width: 100%; height: 100%; object-fit: contain;"
       >
       <div
         v-if="is_pirate_mode && register"
@@ -233,6 +233,7 @@ export default Vue.extend({
   overflow: hidden;
   border-radius: 4px;
   background: rgba(0, 0, 0, 0.08);
+  max-height: 100%;
 }
 
 .thumbnail-overlay {