UI – add correct breakpoint to SoftwareTable (#16911)

## 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

@@ -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.

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;
               }
             }

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;
     }
 

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;
 

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;