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 -->

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

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={

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));
     }
   }