diff --git a/frontend/pages/hosts/details/DeviceUserPage/_styles.scss b/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
index 4938c0528e..1ee1ffe696 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
+++ b/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) {
diff --git a/frontend/pages/hosts/details/HostDetailsPage/_styles.scss b/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
index 25376dceac..9993e31313 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
+++ b/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