From ea560318d0c1fb44293183157c70d69be298afeb Mon Sep 17 00:00:00 2001
From: Pandipipas <62224708+Pandipipas@users.noreply.github.com>
Date: Thu, 12 Feb 2026 01:41:01 +0100
Subject: [PATCH] Fix dashboard spacing and scoreboard column symmetry

---
 .../example/components/ScoreboardPanel.vue    | 30 ++++++-
 src/dashboard/example/views/Dashboard.vue     | 79 +++++++++++--------
 2 files changed, 72 insertions(+), 37 deletions(-)

diff --git a/src/dashboard/example/components/ScoreboardPanel.vue b/src/dashboard/example/components/ScoreboardPanel.vue
index 2163f48..c99bba6 100644
--- a/src/dashboard/example/components/ScoreboardPanel.vue
+++ b/src/dashboard/example/components/ScoreboardPanel.vue
@@ -576,8 +576,8 @@ watchEffect(() => {
       </div>
     </div>
 
-    <div class="row q-col-gutter-lg items-start">
-      <div class="col-12 col-md-5">
+    <div class="scoreboard-grid">
+      <div class="scoreboard-grid__side">
         <QCard
           flat
           bordered
@@ -682,7 +682,7 @@ watchEffect(() => {
         </QCard>
       </div>
 
-      <div class="col-12 col-md-2">
+      <div class="scoreboard-grid__center">
         <QCard
           flat
           bordered
@@ -720,7 +720,7 @@ watchEffect(() => {
         </QCard>
       </div>
 
-      <div class="col-12 col-md-5">
+      <div class="scoreboard-grid__side">
         <QCard
           flat
           bordered
@@ -834,4 +834,26 @@ watchEffect(() => {
   flex-direction: column;
   gap: 16px;
 }
+
+.scoreboard-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+  align-items: start;
+}
+
+.scoreboard-grid__side,
+.scoreboard-grid__center {
+  min-width: 0;
+}
+
+@media (min-width: 1024px) {
+  .scoreboard-grid {
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  }
+
+  .scoreboard-grid__center {
+    width: 220px;
+  }
+}
 </style>
diff --git a/src/dashboard/example/views/Dashboard.vue b/src/dashboard/example/views/Dashboard.vue
index d8839fc..eec0599 100644
--- a/src/dashboard/example/views/Dashboard.vue
+++ b/src/dashboard/example/views/Dashboard.vue
@@ -11,41 +11,35 @@ useHead({ title: 'Dashboard' });
 
 <template>
   <QPage class="q-pa-lg">
-    <div class="column q-gutter-lg dashboard-panels q-mt-lg">
-      <div class="row">
-        <div class="col-12">
-          <QCard
-            bordered
-            class="dashboard-panel-card"
-          >
-            <QCardSection class="dashboard-panel-content">
-              <ScoreboardPanel />
-            </QCardSection>
-          </QCard>
-        </div>
+    <div class="dashboard-panels q-mt-lg">
+      <div class="dashboard-row dashboard-row--scoreboard">
+        <QCard
+          bordered
+          class="dashboard-panel-card"
+        >
+          <QCardSection class="dashboard-panel-content">
+            <ScoreboardPanel />
+          </QCardSection>
+        </QCard>
       </div>
 
-      <div class="row q-col-gutter-lg items-start">
-        <div class="col-12 col-lg-6">
-          <QCard
-            bordered
-            class="dashboard-panel-card"
-          >
-            <QCardSection class="dashboard-panel-content">
-              <CommentaryPanel />
-            </QCardSection>
-          </QCard>
-        </div>
-        <div class="col-12 col-lg-6">
-          <QCard
-            bordered
-            class="dashboard-panel-card"
-          >
-            <QCardSection class="dashboard-panel-content">
-              <BracketPanel />
-            </QCardSection>
-          </QCard>
-        </div>
+      <div class="dashboard-row dashboard-row--bottom">
+        <QCard
+          bordered
+          class="dashboard-panel-card"
+        >
+          <QCardSection class="dashboard-panel-content">
+            <CommentaryPanel />
+          </QCardSection>
+        </QCard>
+        <QCard
+          bordered
+          class="dashboard-panel-card"
+        >
+          <QCardSection class="dashboard-panel-content">
+            <BracketPanel />
+          </QCardSection>
+        </QCard>
       </div>
     </div>
   </QPage>
@@ -54,6 +48,19 @@ useHead({ title: 'Dashboard' });
 <style scoped>
 .dashboard-panels {
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.dashboard-row {
+  width: 100%;
+}
+
+.dashboard-row--bottom {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
 }
 
 .dashboard-panel-card {
@@ -63,4 +70,10 @@ useHead({ title: 'Dashboard' });
 .dashboard-panel-content {
   padding-bottom: 16px;
 }
+
+@media (min-width: 1200px) {
+  .dashboard-row--bottom {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
 </style>