fix overflow of certificates content on host details page (#32487)

fixes #32209 

this is a fix for the host details and my device pages where the content
was overflowing past the edge of the screen on narrow widths

It required a small change to the grid columns to keep the content
within the grid.

- [x] Where appropriate, [automated tests simulate multiple hosts and
test for host
isolation](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/reference/patterns-backend.md#unit-testing)
(updates to one hosts's records do not affect another)

frontend/pages/hosts/details/DeviceUserPage/_styles.scss

@@ -30,6 +30,9 @@
   &__details-panel {
     display: grid;
     gap: $pad-medium;
+    // this gives a single column grid layout for the details panel content
+    // at smaller screen widths
+    grid-template-columns: minmax(0, 1fr);
   }
 
   @media screen and (min-width: $break-md) {

frontend/pages/hosts/details/HostDetailsPage/_styles.scss

@@ -3,6 +3,9 @@
   &__details-panel {
     display: grid;
     gap: $pad-medium;
+    // this gives a single column grid layout for the details panel content
+    // at smaller screen widths
+    grid-template-columns: minmax(0, 1fr);
   }
 
   &__header-summary {
@@ -14,13 +17,13 @@
   @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 {
+    &__details-panel {
       // 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%);
+      grid-template-columns: repeat(2, minmax(0, 50%));
     }
 
     // these are used for positiong the cards in the grid. place these classes