From 01108c898eed110c5c07cd81d770527cd10f86e7 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Mon, 7 Jul 2025 15:32:19 +0100
Subject: [PATCH] redo about card layout to use grid instead of flex (#30547)

Fixes [#29696](https://github.com/fleetdm/fleet/issues/29696)

This is a more thorough fix for the issue of overflowing data on the
about card. The change here is to reimplement the about card layout to
use CSS grid instead of flexbox. This handles responsiveness of the data
better and is easier to maintain when new data fields are added

- [x] Manual QA for all new/changed functionality

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* IP address fields in the About card now display tooltips for truncated
text, improving readability of long values.

* **Style**
* Updated the About card layout from flexbox to a responsive grid,
enhancing alignment and adaptability across screen sizes.
* Adjusted the details panel grid layout to ensure cards remain within
their intended width, preventing overflow issues.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../details/HostDetailsPage/_styles.scss      | 10 ++++-
 .../pages/hosts/details/cards/About/About.tsx |  9 ++--
 .../hosts/details/cards/About/_styles.scss    | 44 +++++--------------
 3 files changed, 26 insertions(+), 37 deletions(-)

diff --git a/frontend/pages/hosts/details/HostDetailsPage/_styles.scss b/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
index 902aeb889e..25376dceac 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
+++ b/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
@@ -12,9 +12,15 @@
   }
 
   @media screen and (min-width: $break-md) {
+    // This details tab must be selected to use these grid stylings. They are
+    // irrelevant for the other tabs.
     &__details-panel.react-tabs__tab-panel--selected {
-      // Must be selected to show grid
-      grid-template-columns: repeat(2, 1fr);
+      // We want the grid to be 2 columns on medium and larger screens and for
+      // those two columns to always be equal width and take up half the
+      // available space. We use 50% here instead of 1fr as there were some
+      // issue with the tooltips in some of the cards forcing the card to be
+      // wider then half the available space.
+      grid-template-columns: repeat(2, 50%);
     }
 
     // these are used for positiong the cards in the grid. place these classes
diff --git a/frontend/pages/hosts/details/cards/About/About.tsx b/frontend/pages/hosts/details/cards/About/About.tsx
index 821664d90b..aa0f21c73d 100644
--- a/frontend/pages/hosts/details/cards/About/About.tsx
+++ b/frontend/pages/hosts/details/cards/About/About.tsx
@@ -60,14 +60,17 @@ const About = ({
           title="Serial number"
           value={<TooltipTruncatedText value={aboutData.hardware_serial} />}
         />
-        <DataSet title="Private IP address" value={aboutData.primary_ip} />
+        <DataSet
+          title="Private IP address"
+          value={<TooltipTruncatedText value={aboutData.primary_ip} />}
+        />
         <DataSet
           title={
             <TooltipWrapper tipContent="The IP address the host uses to connect to Fleet.">
               Public IP address
             </TooltipWrapper>
           }
-          value={aboutData.public_ip}
+          value={<TooltipTruncatedText value={aboutData.public_ip} />}
         />
       </>
     );
@@ -163,7 +166,7 @@ const About = ({
       includeShadow
     >
       <CardHeader header="About" />
-      <div className="info-flex">
+      <div className={`${baseClass}__info-grid`}>
         <DataSet
           title="Added to Fleet"
           value={
diff --git a/frontend/pages/hosts/details/cards/About/_styles.scss b/frontend/pages/hosts/details/cards/About/_styles.scss
index 18e5c2622d..a56334d2ed 100644
--- a/frontend/pages/hosts/details/cards/About/_styles.scss
+++ b/frontend/pages/hosts/details/cards/About/_styles.scss
@@ -34,40 +34,20 @@
     }
   }
 
-  // Adjusts for edge cases of extra long MDM server URL and used by email
-  .info-flex {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
+  // we want the info section data to be displayed in a grid. This grid
+  // will be responsive and adjust the number of columns based on the
+  // screen width. We want the columns to only be as wide as the longest
+  // item in that column. when a item is too long to fit in the
+  // column we will truncate the text for that item. This is done with the
+  // TooltipTruncatedText component.
+  &__info-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(150px, max-content));
     gap: $pad-medium $pad-xxlarge;
-    max-height: 350px;
-    align-content: flex-start;
 
-    .data-set {
-      min-width: none;
-    }
-
-    dd,
-    .component__tooltip-wrapper__element {
-      max-width: 350px;
-    }
-
-    @media (min-width: $break-md) {
-      max-height: 250px;
-
-      dd,
-      .component__tooltip-wrapper__element {
-        max-width: 245px;
-      }
-    }
-
-    @media (min-width: $break-lg) {
-      max-height: 200px;
-
-      dd,
-      .component__tooltip-wrapper__element {
-        max-width: 500px;
-      }
+    // at the larger screen widths we want to have 3 columns.
+    @media (min-width: $break-xxl) {
+      grid-template-columns: repeat(3, minmax(150px, max-content));
     }
   }