From 4df1159d75dbe693ffed17faf7aaaffda763d592 Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Mon, 19 Feb 2024 14:50:36 -0800
Subject: [PATCH] =?UTF-8?q?UI=C2=A0=E2=80=93=20Apply=20missing=20truncatio?=
 =?UTF-8?q?n=20and=20overflow=20styles=20to=20SW=20OS=20table=20(#16971)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## –> #16941

<img width="968" alt="Screenshot 2024-02-19 at 2 20 12 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/461d7eab-57ac-45e9-aa36-1310118caacd">


- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 changes/16941-sw-os-table-overflows           |  1 +
 .../SoftwareOS/SoftwareOSTable/_styles.scss   | 31 +++++++++++++++----
 2 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 changes/16941-sw-os-table-overflows

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