From cd895c45d68d7f9745cc096b2a0d729ec8817951 Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Fri, 16 Feb 2024 07:59:42 -0800
Subject: [PATCH] =?UTF-8?q?UI=20=E2=80=93=20add=20correct=20breakpoint=20t?=
 =?UTF-8?q?o=20SoftwareTable=20(#16911)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Addresses #16910
- This table's controls now break at the same breakpoint as those of
other tables, preventing these style issues:
https://www.loom.com/share/57144ff9703e4eb5a57b1af179a55923


- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 changes/16910-sw-table-breakpoint                           | 2 ++
 .../SoftwarePage/SoftwareTitles/SoftwareTable/_styles.scss  | 5 ++---
 frontend/pages/hosts/ManageHostsPage/_styles.scss           | 6 ++----
 .../components/LabelFilterSelect/_styles.scss               | 4 ++--
 frontend/styles/var/breakpoints.scss                        | 1 +
 5 files changed, 9 insertions(+), 9 deletions(-)
 create mode 100644 changes/16910-sw-table-breakpoint

diff --git a/changes/16910-sw-table-breakpoint b/changes/16910-sw-table-breakpoint
new file mode 100644
index 0000000000..9bc478cc66
--- /dev/null
+++ b/changes/16910-sw-table-breakpoint
@@ -0,0 +1,2 @@
+- Fix a style bug where the controls on the software title and versions table would wrap and bump into
+  each other.
diff --git a/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/_styles.scss b/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/_styles.scss
index 2a3d226f82..638f56d6b9 100644
--- a/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/_styles.scss
+++ b/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/_styles.scss
@@ -41,7 +41,7 @@
       flex-direction: column-reverse; // Search bar on top
       margin-bottom: $pad-medium;
 
-      @media (min-width: $break-md) {
+      @media (min-width: $table-controls-break) {
         flex-direction: row;
       }
     }
@@ -64,7 +64,7 @@
         width: 100%;
       }
 
-      @media (min-width: $break-md) {
+      @media (min-width: $table-controls-break) {
         width: auto;
 
         .input-icon-field__input {
@@ -120,7 +120,6 @@
               // ellipsis for software name
               .software-name {
                 overflow: hidden;
-                text-wrap: nowrap;
                 text-overflow: ellipsis;
               }
             }
diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss
index 0a3c62e2ef..b052b1f504 100644
--- a/frontend/pages/hosts/ManageHostsPage/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss
@@ -132,9 +132,7 @@
     }
 
     // table header content responsive styles
-    // NOTE: 1150px is a custom breakpoint to deal with responsiveness of the
-    // table controls. 990px doesnt work for us in this case.
-    @media (max-width: 1150px) {
+    @media (max-width: $table-controls-break) {
       &__header {
         flex-direction: column;
       }
@@ -238,7 +236,7 @@
   &__status_dropdown {
     width: 175px;
 
-    @media (min-width: 1150px) {
+    @media (min-width: $table-controls-break) {
       width: 190px;
     }
 
diff --git a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
index d47a4c74ab..0c1ed6fac5 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
@@ -69,7 +69,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 
-    @media (max-width: 1150px) {
+    @media (max-width: $table-controls-break) {
       width: auto;
     }
   }
@@ -149,7 +149,7 @@
   }
 }
 
-@media (min-width: 1150px) {
+@media (min-width: $table-controls-break) {
   .label-filter-select {
     min-width: 220px;
 
diff --git a/frontend/styles/var/breakpoints.scss b/frontend/styles/var/breakpoints.scss
index 6d0fa51fbb..544803c6e0 100644
--- a/frontend/styles/var/breakpoints.scss
+++ b/frontend/styles/var/breakpoints.scss
@@ -5,3 +5,4 @@ $break-md: 990px;
 $break-sm: 880px;
 $break-xs: 768px;
 $tooltip-break-md: 1000px; // Prevents horizontal scrolling off viewport
+$table-controls-break: 1150px;