Fleet UI: Fix user management page overflow

changes/25015-user-page-responsive

@@ -0,0 +1 @@
+- Fleet UI: Fixed user page responsiveness to not overflow horizontally

frontend/components/EmptyTable/_styles.scss

@@ -60,7 +60,6 @@
       justify-content: center;
       margin-bottom: 20px;
       min-height: 155px;
-      max-width: none;
     }
   }
 }

frontend/components/MainContent/_styles.scss

@@ -18,3 +18,15 @@
     z-index: 4; // Needed for settings page scroll
   }
 }
+
+@media (max-width: ($break-xs - 1)) {
+  .main-content {
+    padding: $pad-large;
+  }
+}
+
+@media (max-width: ($break-mobile-md - 1)) {
+  .main-content {
+    padding: 20px;
+  }
+}

frontend/components/TableContainer/DataTable/_styles.scss

@@ -101,11 +101,12 @@ $shadow-transition-width: 10px;
       th {
         padding: $pad-medium $pad-large;
         white-space: nowrap;
-        border-right: 1px solid $ui-fleet-black-10;
+        border-left: 1px solid $ui-fleet-black-10;
         font-weight: $bold;
 
         &:first-child {
           border-top-left-radius: 6px;
+          border-left: none;
         }
 
         &.selection__header {
@@ -114,10 +115,23 @@ $shadow-transition-width: 10px;
         }
 
         &:last-child {
-          border-right: none;
           border-top-right-radius: 6px;
         }
 
+        &.actions__header,
+        &.id__header, // Same as actions__header on some pages
+        {
+          border-left: none;
+          width: 99px;
+        }
+
+        &.linkToFilteredHosts__header,
+        &.view-all-hosts__header // Same as linkToFilteredHosts__header on some pages
+        {
+          border-left: none;
+          max-width: 120px;
+        }
+
         .column-header {
           span {
             display: flex;
@@ -224,8 +238,19 @@ $shadow-transition-width: 10px;
         max-width: 500px;
         word-wrap: break-word;
 
-        &.linkToFilteredHosts__cell {
+        &.actions__cell,
+        &.id__cell // Same as actions__cell on some pages
+        {
+          display: flex;
+          justify-content: end; // Aligns actions dropdown to right of table
+          max-width: 99px;
+        }
+
+        &.linkToFilteredHosts__cell,
+        &.view-all-hosts__cell // Same as linkToFilteredHosts__cell on some pages
+        {
           text-align: right;
+          max-width: 140px;
         }
 
         &.selection__cell {

frontend/components/buttons/Button/_styles.scss

@@ -92,6 +92,7 @@ $base-class: "button";
       $core-vibrant-blue-down
     );
     display: flex;
+    text-wrap: nowrap;
   }
 
   &--success {

frontend/pages/admin/IntegrationsPage/cards/Integrations/_styles.scss

@@ -83,8 +83,6 @@
     border-radius: $pad-xsmall;
     border: px-to-rem(1) solid $ui-fleet-black-10;
     margin: 0;
-    max-width: none;
-    width: 100%;
     h3 {
       margin-bottom: px-to-rem(10);
     }

frontend/pages/admin/UserManagementPage/_styles.scss

@@ -6,11 +6,110 @@
     padding-bottom: $pad-medium;
   }
 
-  &__sandbox-demo-message {
-    margin-top: 3.5rem;
-  }
-
   &__api-only-user {
     @include grey-badge;
   }
+
+  thead {
+    // need specificity to override datatable css
+    th {
+      &.actions__header {
+        padding-left: 0;
+      }
+      &.status__header,
+      &.role__header {
+        width: 86px; // set to prevent expanding
+      }
+    }
+  }
+
+  tbody {
+    // need specificity to override datatable css
+    td.name__cell,
+    td.role__cell,
+    td.teams__cell,
+    td.status__cell,
+    td.email__cell {
+      max-width: $col-sm;
+      white-space: nowrap;
+    }
+
+    td.status__cell,
+    td.role__cell {
+      white-space: nowrap; // Prevent No access from wrapping
+      max-width: 63px;
+    }
+
+    td.actions__cell {
+      padding-left: 0;
+    }
+  }
+
+  @media (min-width: ($break-lg)) {
+    .name__header,
+    .name__cell {
+      max-width: $col-md;
+    }
+  }
+
+  @media (max-width: ($break-sm - 1)) {
+    .email__header,
+    .email__cell {
+      display: none;
+      width: 0;
+    }
+  }
+
+  @media (max-width: ($break-xs - 1)) {
+    .status__header,
+    .status__cell {
+      display: none;
+      width: 0;
+    }
+  }
+
+  @media (max-width: ($break-mobile-md - 1)) {
+    .teams__header,
+    .teams__cell {
+      display: none;
+      width: 0;
+    }
+
+    // Splits header to 2 lines with user count on the first line
+    .table-container__header {
+      align-items: end;
+      &-left {
+        flex-direction: column;
+        width: initial;
+        align-items: start;
+      }
+
+      .table-container__search {
+        width: 100%;
+      }
+    }
+  }
+
+  @media (max-width: ($break-mobile-sm - 1)) {
+    .role__header,
+    .role__cell {
+      display: none;
+      width: 0;
+    }
+
+    .table-container__header {
+      flex-direction: column;
+      align-items: start;
+      width: 100%;
+
+      &-left {
+        width: 100%;
+
+        .controls,
+        .button {
+          width: 100%;
+        }
+      }
+    }
+  }
 }

frontend/pages/hosts/details/cards/Policies/_styles.scss

@@ -13,7 +13,6 @@
         }
         .response__header {
           width: 0;
-          border-right: none;
         }
         .linkToFilteredHosts__header {
           width: 140px;

frontend/styles/var/breakpoints.scss

@@ -4,5 +4,9 @@ $break-lg: 1400px;
 $break-md: 990px;
 $break-sm: 880px;
 $break-xs: 768px;
+$break-mobile-lg: 650px;
+$break-mobile-md: 576px;
+$break-mobile-sm: 480px;
+$break-mobile-xs: 320px;
 $tooltip-break-md: 1000px; // Prevents horizontal scrolling off viewport
 $table-controls-break: 1150px;