From f11a73dd53aa6706148d2c58500ff8573d1f3171 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Fri, 28 Mar 2025 16:57:25 -0400
Subject: [PATCH] Fleet UI: Responsive accommodations for 7 cards (#27644)

---
 .../sections/PlatformHostCounts/_styles.scss  | 82 +++++++++++++++++--
 1 file changed, 77 insertions(+), 5 deletions(-)

diff --git a/frontend/pages/DashboardPage/sections/PlatformHostCounts/_styles.scss b/frontend/pages/DashboardPage/sections/PlatformHostCounts/_styles.scss
index 369e489d40..db4fac55c9 100644
--- a/frontend/pages/DashboardPage/sections/PlatformHostCounts/_styles.scss
+++ b/frontend/pages/DashboardPage/sections/PlatformHostCounts/_styles.scss
@@ -5,13 +5,23 @@
   // >= 320px and < 480px
   @media (min-width: $break-mobile-xs) {
     grid-template-columns: repeat(2, 1fr);
+
+    // For odd number of cards, make the first one span 2 columns
+    & > :first-child:nth-child(odd) {
+      grid-column: span 2;
+    }
   }
 
-  // >= 480px and < 880px
+  // >= 480px
   @media (min-width: $break-mobile-sm) {
     grid-template-columns: 1fr;
     grid-template-rows: initial; // undo multi row
 
+    // For odd number of cards, undo first one spanning 2 columns
+    & > :first-child:nth-child(odd) {
+      grid-column: initial;
+    }
+
     &:has(> :nth-child(2)) {
       grid-template-columns: repeat(2, 1fr);
     }
@@ -29,15 +39,77 @@
       grid-template-columns: repeat(3, 1fr);
       grid-template-rows: auto auto;
     }
+
+    // Special case for exactly 7 items
+    &:has(> :nth-child(7)) {
+      grid-template-columns: repeat(
+        6,
+        1fr
+      ); // Make both rows span across 6 columns
+      grid-template-rows: auto auto auto; // Three rows
+
+      // Overridden at 576px
+      & > :nth-child(-n + 5) {
+        // First row (cards 1-4)
+        grid-column: span 3; // Each card spans 3 columns
+      }
+
+      // Overridden at 576px
+      & > :nth-child(n + 5) {
+        // Second row (cards 5-7)
+        grid-column: span 2; // Each card spans 4 columns
+      }
+    }
+  }
+
+  // > 576px
+  @media (min-width: $break-mobile-md) {
+    // Special case for exactly 7 items
+    &:has(> :nth-child(7)) {
+      grid-template-columns: repeat(
+        12,
+        1fr
+      ); // Make both rows span across 12 columns
+      grid-template-rows: auto auto; // Two rows
+
+      // Overridden at 990px
+      & > :nth-child(-n + 4) {
+        // First row (cards 1-4)
+        grid-column: span 3; // Each card spans 3 columns
+      }
+
+      // Overridden at 990px
+      & > :nth-child(n + 5) {
+        // Second row (cards 5-7)
+        grid-column: span 4; // Each card spans 4 columns
+      }
+    }
   }
 
   // >= 880px
   @media (min-width: $break-sm) {
     &#{&} {
-      // Intentionally repeat classname to override break-xs selector specificity
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-      grid-template-rows: none;
-      gap: $pad-medium;
+      // Apply to all cases except when there are exactly 7 items
+      &:not(:has(> :nth-child(7))) {
+        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+        grid-template-rows: none;
+        gap: $pad-medium;
+      }
+    }
+  }
+
+  // >= 990px
+  @media (min-width: $break-md) {
+    // Special case for exactly 7 items
+    &:has(> :nth-child(7)) {
+      grid-template-columns: repeat(7, 1fr);
+      grid-template-rows: auto;
+
+      // Must override specificity above
+      & > :nth-child(n + 5),
+      & > :nth-child(-n + 4) {
+        grid-column: span 1;
+      }
     }
   }
 }