From 617ba5e8b329ae8ecd2cbf19a5c92260f051cdaf Mon Sep 17 00:00:00 2001 From: Gabriel Hernandez Date: Tue, 2 Sep 2025 17:12:28 +0100 Subject: [PATCH] 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 | 3 +++ frontend/pages/hosts/details/HostDetailsPage/_styles.scss | 7 +++++-- 2 files changed, 8 insertions(+), 2 deletions(-) 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