Fleet UI: Dashboard responsiveness tweaks (#27990)

frontend/pages/DashboardPage/cards/HostCountCard/HostCountCard.tsx

@@ -76,13 +76,13 @@ const HostCountCard = ({
   const renderCard = () => {
     if (iconPosition === "left") {
       return (
-        <>
-          <div className={`${baseClass}__icon-count`}>
-            {renderIcon()}
+        <div className={`${baseClass}__icon`}>
+          {renderIcon()}
+          <div className={`${baseClass}__count-description`}>
             {renderCount()}
+            {renderDescription()}
           </div>
-          {renderDescription()}
-        </>
+        </div>
       );
     }
 

frontend/pages/DashboardPage/cards/HostCountCard/_styles.scss

@@ -11,7 +11,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: $pad-small;
+    gap: $pad-xsmall;
     text-align: left;
     height: fit-content;
     padding: $x-large;
@@ -30,13 +30,20 @@
     }
   }
 
-  &__icon-count {
+  &__icon {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 12px;
   }
 
+  &__count-description {
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    gap: $pad-xsmall;
+  }
+
   &__count {
     font-size: $x-large;
     white-space: nowrap;

frontend/pages/DashboardPage/sections/MetricsHostCounts/_styles.scss

@@ -10,7 +10,7 @@
     grid-template-rows: repeat(3, auto);
   }
 
-  // >= 576px and < 880px
+  // >= 576px and < 768px
   @media (min-width: $break-mobile-md) {
     display: grid;
 
@@ -42,10 +42,10 @@
     }
   }
 
-  // >= 880px
+  // >= 768px
   // Up to 3 cards are in a single row.
   // 16pt gap
-  @media (min-width: $break-sm) {
+  @media (min-width: $break-xs) {
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
     grid-template-rows: 1fr;
     gap: $pad-medium;