From cb3e1d5b69e5366b24093ecfda92a820a260cabf Mon Sep 17 00:00:00 2001 From: Gabriel Hernandez Date: Tue, 19 Nov 2024 11:46:41 +0000 Subject: [PATCH] Fix abm table overflow issue (#23722) relates to #21986 fix a UI overflow issue on the abm table - [x] Changes file added for user-visible changes in `changes/`, `orbit/changes/` or `ee/fleetd-chrome/changes`. - [x] Manual QA for all new/changed functionality --- changes/21986-fix-to-abm-token-table-responsive | 1 + .../components/AppleBusinessManagerTable/_styles.scss | 11 +++++++++++ 2 files changed, 12 insertions(+) create mode 100644 changes/21986-fix-to-abm-token-table-responsive diff --git a/changes/21986-fix-to-abm-token-table-responsive b/changes/21986-fix-to-abm-token-table-responsive new file mode 100644 index 000000000000..c2d626e410c4 --- /dev/null +++ b/changes/21986-fix-to-abm-token-table-responsive @@ -0,0 +1 @@ +- fix responsive styles for the adm table diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/AppleBusinessManagerTable/_styles.scss b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/AppleBusinessManagerTable/_styles.scss index 6dc700f6bd7d..db84ef005bd2 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/AppleBusinessManagerTable/_styles.scss +++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/AppleBusinessManagerTable/_styles.scss @@ -1,5 +1,16 @@ .apple-business-manager-table { + .data-table-block .data-table { + td.apple_id__cell { + max-width: 180px; + } + + td.macos_team__cell, td.ios_team__cell, td.ipados_team__cell { + max-width: 150px; + } + } + + // The desired behavior is to hide the header and team cell one by one // as the viewport gets smaller. This is achieved by using the max-width // media query with the breakpoint values taken from when the table content