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