From 29b3da14f37ae11a3335af93f2beeaaebeebbe1e Mon Sep 17 00:00:00 2001 From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com> Date: Thu, 9 Nov 2023 09:16:22 -0800 Subject: [PATCH] =?UTF-8?q?UI=20=E2=80=93=20Replace=20`overflow-x:=20scrol?= =?UTF-8?q?l`=20with=20...`auto`;=20remove=20redundant=20local=20declarati?= =?UTF-8?q?ons=20(#15054)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Addresses #11753 Fixed: ![Screenshot 2023-11-08 at 5 45 09 PM](https://github.com/fleetdm/fleet/assets/61553566/55570f5b-eb7d-4974-96e3-0304eef30b87) (Was also occurring on queries page) ![Screenshot 2023-11-08 at 5 45 16 PM](https://github.com/fleetdm/fleet/assets/61553566/139d1ac6-e1e7-4b22-87d5-8cb43d00005d) ## Checklist for submitter - [x] Changes file added for user-visible changes in `changes/` - [x] Manual QA for all new/changed functionality --------- Co-authored-by: Jacob Shandling --- changes/11753-scrollbars | 1 + frontend/components/TableContainer/DataTable/_styles.scss | 1 + frontend/pages/DashboardPage/cards/Munki/_styles.scss | 3 --- .../pages/DashboardPage/cards/OperatingSystems/_styles.scss | 6 +----- frontend/pages/DashboardPage/cards/Software/_styles.scss | 3 --- frontend/pages/hosts/ManageHostsPage/_styles.scss | 3 --- .../PolicyPage/components/QueryResults/_styles.scss | 5 ----- frontend/pages/queries/ManageQueriesPage/_styles.scss | 1 - .../queries/details/components/QueryReport/_styles.scss | 4 ---- .../pages/queries/edit/components/QueryResults/_styles.scss | 4 ---- 10 files changed, 3 insertions(+), 28 deletions(-) create mode 100644 changes/11753-scrollbars diff --git a/changes/11753-scrollbars b/changes/11753-scrollbars new file mode 100644 index 0000000000..8849996879 --- /dev/null +++ b/changes/11753-scrollbars @@ -0,0 +1 @@ +- Fix a UI bug in data tables where scrollbars would continue to be present despite no overflowing content diff --git a/frontend/components/TableContainer/DataTable/_styles.scss b/frontend/components/TableContainer/DataTable/_styles.scss index 5288b5f029..bc803ace11 100644 --- a/frontend/components/TableContainer/DataTable/_styles.scss +++ b/frontend/components/TableContainer/DataTable/_styles.scss @@ -14,6 +14,7 @@ $shadow-transition-width: 10px; margin-top: $pad-small; flex-grow: 1; width: 100%; + overflow-x: auto; // Shadow background-image: diff --git a/frontend/pages/DashboardPage/cards/Munki/_styles.scss b/frontend/pages/DashboardPage/cards/Munki/_styles.scss index bb4310970b..02cd3bc9a5 100644 --- a/frontend/pages/DashboardPage/cards/Munki/_styles.scss +++ b/frontend/pages/DashboardPage/cards/Munki/_styles.scss @@ -2,9 +2,6 @@ margin-top: $pad-large; position: relative; - .data-table__wrapper { - overflow-x: auto; - } .component__tabs-wrapper .table-container__header { display: none; } diff --git a/frontend/pages/DashboardPage/cards/OperatingSystems/_styles.scss b/frontend/pages/DashboardPage/cards/OperatingSystems/_styles.scss index 8975967b07..9cc36dd89e 100644 --- a/frontend/pages/DashboardPage/cards/OperatingSystems/_styles.scss +++ b/frontend/pages/DashboardPage/cards/OperatingSystems/_styles.scss @@ -2,10 +2,6 @@ margin-top: $pad-large; position: relative; - .data-table__wrapper { - overflow-x: auto; - } - .hosts-cell__wrapper { display: flex; align-items: center; @@ -33,6 +29,6 @@ &__os-empty-table.empty-table__container { // overriding base component styles so this look correct for this card - margin-top: $pad-large + margin-top: $pad-large; } } diff --git a/frontend/pages/DashboardPage/cards/Software/_styles.scss b/frontend/pages/DashboardPage/cards/Software/_styles.scss index 5ff0a14a7d..9b16628aaa 100644 --- a/frontend/pages/DashboardPage/cards/Software/_styles.scss +++ b/frontend/pages/DashboardPage/cards/Software/_styles.scss @@ -13,9 +13,6 @@ outline: 1px solid $core-vibrant-blue; } } - .data-table__wrapper { - overflow-x: auto; - } .form-field--dropdown { margin: 0; } diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss index c25f09502f..282fb3609b 100644 --- a/frontend/pages/hosts/ManageHostsPage/_styles.scss +++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss @@ -196,9 +196,6 @@ .table-container__data-table-block { .data-table-block { .data-table { - &__wrapper { - overflow-x: scroll; - } &__table { tbody { .issues { diff --git a/frontend/pages/policies/PolicyPage/components/QueryResults/_styles.scss b/frontend/pages/policies/PolicyPage/components/QueryResults/_styles.scss index 446a4c8c16..d330725410 100644 --- a/frontend/pages/policies/PolicyPage/components/QueryResults/_styles.scss +++ b/frontend/pages/policies/PolicyPage/components/QueryResults/_styles.scss @@ -1,5 +1,4 @@ .query-results { - .info-banner { margin: 2rem auto 1.25rem; } @@ -14,10 +13,6 @@ } } - .data-table__wrapper { - overflow-x: scroll; - } - .data-table-block .data-table thead th { min-width: 140px; padding-left: 0px; diff --git a/frontend/pages/queries/ManageQueriesPage/_styles.scss b/frontend/pages/queries/ManageQueriesPage/_styles.scss index ce18192409..8b0000d2e1 100644 --- a/frontend/pages/queries/ManageQueriesPage/_styles.scss +++ b/frontend/pages/queries/ManageQueriesPage/_styles.scss @@ -98,7 +98,6 @@ .data-table-block { .data-table { &__wrapper { - overflow-x: scroll; overflow-y: hidden; } &__table { diff --git a/frontend/pages/queries/details/components/QueryReport/_styles.scss b/frontend/pages/queries/details/components/QueryReport/_styles.scss index 1d60937eeb..ecfcde77c8 100644 --- a/frontend/pages/queries/details/components/QueryReport/_styles.scss +++ b/frontend/pages/queries/details/components/QueryReport/_styles.scss @@ -9,10 +9,6 @@ margin-bottom: 44px; // Fills space where filter is removed } } - - .data-table__wrapper { - overflow-x: scroll; - } } &__results-cta { diff --git a/frontend/pages/queries/edit/components/QueryResults/_styles.scss b/frontend/pages/queries/edit/components/QueryResults/_styles.scss index 36ea6b4290..812ce954f2 100644 --- a/frontend/pages/queries/edit/components/QueryResults/_styles.scss +++ b/frontend/pages/queries/edit/components/QueryResults/_styles.scss @@ -23,10 +23,6 @@ } } - .data-table__wrapper { - overflow-x: scroll; - } - .data-table-block .data-table thead th { min-width: 140px; padding-left: 0px;