From 818ac56f533913a27f6527430ddc6bba1906f277 Mon Sep 17 00:00:00 2001
From: Pandipipas <62224708+Pandipipas@users.noreply.github.com>
Date: Fri, 13 Feb 2026 01:08:24 +0100
Subject: [PATCH] Stabilize preview control centering across zoom levels

---
 .../example/components/ScoreboardPanel.vue    | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/dashboard/example/components/ScoreboardPanel.vue b/src/dashboard/example/components/ScoreboardPanel.vue
index 5872b50..0bb2f0f 100644
--- a/src/dashboard/example/components/ScoreboardPanel.vue
+++ b/src/dashboard/example/components/ScoreboardPanel.vue
@@ -1222,9 +1222,9 @@ watch(
 
 .scoreboard-preview__side-inner {
   width: 100%;
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(220px, 320px) minmax(180px, 1fr);
   align-items: center;
-  justify-content: space-between;
   gap: 14px;
 }
 
@@ -1233,7 +1233,16 @@ watch(
 }
 
 .scoreboard-preview__side--right .scoreboard-preview__side-inner {
-  justify-content: space-between;
+  grid-template-columns: minmax(180px, 1fr) minmax(220px, 320px);
+}
+
+
+.scoreboard-preview__side .scoreboard-preview__image-wrap {
+  justify-self: start;
+}
+
+.scoreboard-preview__side--right .scoreboard-preview__image-wrap {
+  justify-self: end;
 }
 
 .scoreboard-preview__image-wrap {
@@ -1266,6 +1275,7 @@ watch(
 
 .scoreboard-preview__controls {
   width: min(100%, 260px);
+  justify-self: center;
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -1365,9 +1375,9 @@ watch(
   }
 
   .scoreboard-preview__side-inner {
-    flex-direction: column;
+    grid-template-columns: 1fr;
     align-items: flex-start;
-    justify-content: flex-start;
+    justify-items: flex-start;
   }
 
   .scoreboard-preview__side--right {
@@ -1375,7 +1385,7 @@ watch(
   }
 
   .scoreboard-preview__side--right .scoreboard-preview__side-inner {
-    justify-content: flex-start;
+    grid-template-columns: 1fr;
   }
 }