From 77fedf4dc8265b019badddda767e3a02e54b6af5 Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Mon, 10 Feb 2025 13:21:47 -0700
Subject: [PATCH] cleanup

---
 .../assets/src/sass/_theme/_admin.scss        |  1 +
 src/registrar/templates/admin/analytics.html  | 24 +++++++++----------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/registrar/assets/src/sass/_theme/_admin.scss b/src/registrar/assets/src/sass/_theme/_admin.scss
index c06c9c926..07749d2dd 100644
--- a/src/registrar/assets/src/sass/_theme/_admin.scss
+++ b/src/registrar/assets/src/sass/_theme/_admin.scss
@@ -934,6 +934,7 @@ ul.add-list-reset {
     .analytics-dashboard-charts {
         // Desktop layout - charts in top row, details in bottom row
         display: grid;
+        gap: 2rem;
         // Equal columns each gets 1/2 of the space
         grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
         grid-template-areas:
diff --git a/src/registrar/templates/admin/analytics.html b/src/registrar/templates/admin/analytics.html
index b36511206..3747dc7b6 100644
--- a/src/registrar/templates/admin/analytics.html
+++ b/src/registrar/templates/admin/analytics.html
@@ -127,7 +127,7 @@
 				</ul>
         <div class="analytics-dashboard-charts margin-top-2">
           {% comment %} Managed/Unmanaged domains {% endcomment %}
-          <div class="analytics-item chart-1 grid-col">
+          <div class="chart-1 grid-col">
             <canvas id="myChart1" width="400" height="200"
               aria-label="Chart: {{ data.managed_domains.end_date_count.0 }} managed domains for {{ data.end_date }}"
               role="img"
@@ -138,7 +138,7 @@
               <p>{{ data.managed_domains.end_date_count.0 }} managed domains for {{ data.end_date }}</p>
             </canvas>
           </div>
-          <div class="margin-bottom-2 analytics-item details-1 grid-col">
+          <div class="details-1 grid-col margin-bottom-2">
             <details class="dja-detail-table" aria-role="button" closed>
               <summary class="dja-details-summary">Details for managed domains</summary>
               <div class="grid-container margin-left-0 padding-left-0 padding-right-0 dja-details-contents">
@@ -146,7 +146,7 @@
               </div>
             </details>
           </div>
-          <div class="analytics-item chart-2">
+          <div class="chart-2 grid-col">
             <canvas id="myChart2" width="400" height="200"
               aria-label="Chart: {{ data.unmanaged_domains.end_date_count.0 }} unmanaged domains for {{ data.end_date }}"
               role="img"
@@ -157,7 +157,7 @@
               <p>{{ data.unmanaged_domains.end_date_count.0 }} unmanaged domains for {{ data.end_date }}</p>
             </canvas>
           </div>
-          <div class="margin-bottom-2 analytics-item details-2 grid-col">
+          <div class="details-2 grid-col margin-bottom-2">
             <details class="dja-detail-table" aria-role="button" closed>
               <summary class="dja-details-summary">Details for unmanaged domains</summary>
               <div class="grid-container margin-left-0 padding-left-0 padding-right-0 dja-details-contents">
@@ -167,7 +167,7 @@
           </div>
 
           {% comment %} Deleted/Ready domains {% endcomment %}
-          <div class="analytics-item chart-3 grid-col">
+          <div class="chart-3 grid-col">
             <canvas id="myChart3" width="400" height="200"
               aria-label="Chart: {{ data.deleted_domains.end_date_count.0 }} deleted domains for {{ data.end_date }}"
               role="img" 
@@ -178,7 +178,7 @@
               <p>{{ data.deleted_domains.end_date_count.0 }} deleted domains for {{ data.end_date }}</p>
             </canvas>
           </div>
-          <div class="margin-bottom-2 analytics-item details-3 grid-col">
+          <div class="details-3 grid-col margin-bottom-2">
             <details class="dja-detail-table" aria-role="button" closed>
               <summary class="dja-details-summary">Details for deleted domains</summary>
               <div class="grid-container margin-left-0 padding-left-0 padding-right-0 dja-details-contents">
@@ -186,7 +186,7 @@
               </div>
             </details>
           </div>
-          <div class="analytics-item chart-4 grid-col">
+          <div class="chart-4 grid-col">
             <canvas id="myChart4" width="400" height="200"
               aria-label="Chart: {{ data.ready_domains.end_date_count.0 }} ready domains for {{ data.end_date }}"
               role="img" 
@@ -197,7 +197,7 @@
               <p>{{ data.ready_domains.end_date_count.0 }} ready domains for {{ data.end_date }}</p>
             </canvas>
           </div>
-          <div class="margin-bottom-2 analytics-item details-4 grid-col">
+          <div class="details-4 grid-col margin-bottom-2">
             <details class="dja-detail-table" aria-role="button" closed>
               <summary class="dja-details-summary">Details for ready domains</summary>
               <div class="grid-container margin-left-0 padding-left-0 padding-right-0 dja-details-contents">
@@ -207,7 +207,7 @@
           </div>
 
           {% comment %} Requests {% endcomment %}
-          <div class="analytics-item chart-5 grid-col">
+          <div class="chart-5 grid-col">
             <canvas id="myChart5" width="400" height="200"
               aria-label="Chart: {{ data.submitted_requests.end_date_count.0 }} submitted requests for {{ data.end_date }}"
               role="img" 
@@ -218,7 +218,7 @@
               <p>{{ data.submitted_requests.end_date_count.0 }} submitted requests for {{ data.end_date }}</p>
             </canvas>
           </div>
-          <div class="margin-bottom-2 analytics-item details-5 grid-col">
+          <div class="details-5 grid-col margin-bottom-2">
             <details class="dja-detail-table" aria-role="button" closed>
               <summary class="dja-details-summary">Details for submitted requests</summary>
               <div class="grid-container margin-left-0 padding-left-0 padding-right-0 dja-details-contents">
@@ -226,7 +226,7 @@
               </div>
             </details>
           </div>
-          <div class="analytics-item chart-6 grid-col">
+          <div class="chart-6 grid-col">
             <canvas id="myChart6" width="400" height="200"
               aria-label="Chart: {{ data.requests.end_date_count.0 }} requests for {{ data.end_date }}"
               role="img" 
@@ -237,7 +237,7 @@
               <p>{{ data.requests.end_date_count.0 }} requests for {{ data.end_date }}</p>
             </canvas>
           </div>
-          <div class="margin-bottom-2 analytics-item details-6 grid-col">
+          <div class="details-6 grid-col margin-bottom-2">
             <details class="dja-detail-table" aria-role="button" closed>
               <summary class="dja-details-summary">Details for all requests</summary>
               <div class="grid-container margin-left-0 padding-left-0 padding-right-0 dja-details-contents">