diff --git a/changes/16941-sw-os-table-overflows b/changes/16941-sw-os-table-overflows new file mode 100644 index 0000000000..502ce6c44f --- /dev/null +++ b/changes/16941-sw-os-table-overflows @@ -0,0 +1 @@ +- Fix a bug where long OS names caused the table to render outside its bounds with smaller viewports diff --git a/frontend/pages/SoftwarePage/SoftwareOS/SoftwareOSTable/_styles.scss b/frontend/pages/SoftwarePage/SoftwareOS/SoftwareOSTable/_styles.scss index 2312dbf55c..867c2948fa 100644 --- a/frontend/pages/SoftwarePage/SoftwareOS/SoftwareOSTable/_styles.scss +++ b/frontend/pages/SoftwarePage/SoftwareOS/SoftwareOSTable/_styles.scss @@ -25,12 +25,31 @@ .table-container { &__data-table-block { .data-table-block { - .data-table__table { - tbody { - .link-cell { - display: flex; - align-items: center; - gap: $pad-small; + .data-table { + &__wrapper { + overflow-x: auto; + } + &__table { + tbody { + .name_only__cell { + max-width: $col-md; + + // Tooltip does not get cut off + .children-wrapper { + overflow: initial; + } + + // ellipsis for software name + .software-name { + overflow: hidden; + text-overflow: ellipsis; + } + } + .link-cell { + display: flex; + align-items: center; + gap: $pad-small; + } } } }