Update global.css to add spacing classes for margin-bottom

Author: martedesco

src/assets/global.css

@@ -12,4 +12,12 @@
 
   .error-message {
     color: red;
+  }
+
+  .spacing-10 {
+    margin-bottom: 10px;
+  }
+
+  .spacing-25 {
+    margin-bottom: 25px;
   }

src/components/BreakdownComponent.vue

@@ -5,7 +5,7 @@
       <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
           <v-card-item>
             <div class="tiles-text">
-              <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
+              <div class="spacing-25"></div>
               <div class="text-h6 mb-1">Number of {{ breakdownDisplayNamePlural }}</div>
               <div class="text-caption">
                 Over the last 28 days
@@ -22,7 +22,7 @@
           <v-col cols="6">
             <v-card>
               <v-card-item class="d-flex justify-center align-center">
-                <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
+                <div class="spacing-25"></div>
                 <div class="text-h6 mb-1">Top 5 {{ breakdownDisplayNamePlural }} by accepted prompts</div>
                 <div style="width: 300px; height: 300px;">
                   <Pie :data="breakdownsChartDataTop5AcceptedPrompts" :options="chartOptions" />
@@ -34,7 +34,7 @@
           <v-col cols="6">
             <v-card>
               <v-card-item class="d-flex justify-center align-center">
-                <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
+                <div class="spacing-25"></div>
                 <div class="text-h6 mb-1">Top 5 {{ breakdownDisplayNamePlural }} by acceptance rate</div>
                 <div style="width: 300px; height: 300px;">
                   <Pie :data="breakdownsChartDataTop5AcceptanceRate" :options="chartOptions" />

src/components/CopilotChatViewer.vue

@@ -3,7 +3,7 @@
         <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
             <v-card-item>
                 <div class="tiles-text">
-                    <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
+                    <div class="spacing-25"></div>
                     <div class="text-h6 mb-1">Cumulative Number of Turns</div>
                     <div class="text-caption">Over the last 28 days</div>
                     <p class="text-h4">{{ cumulativeNumberTurns }}</p>
@@ -14,7 +14,7 @@
         <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
             <v-card-item>
                 <div class="tiles-text">
-                    <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
+                    <div class="spacing-10"></div>
                     <div class="text-h6 mb-1">Cumulative Number of Acceptances</div>
                     <div class="text-caption">Over the last 28 days</div>
                     <p class="text-h4">{{ cumulativeNumberAcceptances }}</p>

src/components/MetricsViewer.vue

@@ -4,8 +4,8 @@
       <!-- Acceptance Rate Tile -->  
       <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
           <v-card-item>
+            <div class="spacing-25"></div>
             <div class="tiles-text">
-              <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
               <div class="text-h6 mb-1">Acceptance Rate Average</div>
               <div class="text-caption">
                 Over the last 28 days
@@ -18,7 +18,7 @@
       <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
         <v-card-item>
           <div class="tiles-text">
-            <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
+            <div class="spacing-10"></div>
             <div class="text-h6 mb-1">Cumulative Number of Suggestions</div>
             <div class="text-caption">
               Over the last 28 days
@@ -31,7 +31,7 @@
       <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
         <v-card-item>
           <div class="tiles-text">
-            <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
+            <div class="spacing-10"></div>
             <div class="text-h6 mb-1">Cumulative Number of Accepted Prompts</div>
             <div class="text-caption">
               Over the last 28 days
@@ -44,7 +44,7 @@
       <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
         <v-card-item>
           <div class="tiles-text">
-            <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
+            <div class="spacing-10"></div>
             <div class="text-h6 mb-1">Cumulative Number of Lines of Code Accepted</div>
             <div class="text-caption">
               Over the last 28 days