Fix dashboard spacing and scoreboard column symmetry

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>

src/dashboard/example/views/Dashboard.vue

@@ -11,9 +11,8 @@ 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">
+    <div class="dashboard-panels q-mt-lg">
+      <div class="dashboard-row dashboard-row--scoreboard">
         <QCard
           bordered
           class="dashboard-panel-card"
@@ -23,10 +22,8 @@ useHead({ title: 'Dashboard' });
           </QCardSection>
         </QCard>
       </div>
-      </div>
 
-      <div class="row q-col-gutter-lg items-start">
-        <div class="col-12 col-lg-6">
+      <div class="dashboard-row dashboard-row--bottom">
         <QCard
           bordered
           class="dashboard-panel-card"
@@ -35,8 +32,6 @@ useHead({ title: 'Dashboard' });
             <CommentaryPanel />
           </QCardSection>
         </QCard>
-        </div>
-        <div class="col-12 col-lg-6">
         <QCard
           bordered
           class="dashboard-panel-card"
@@ -47,13 +42,25 @@ useHead({ title: 'Dashboard' });
         </QCard>
       </div>
     </div>
-    </div>
   </QPage>
 </template>
 
 <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>