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;