diff --git a/src/apps/profiles/src/components/tc-achievements/TcSpecialRolesBanner/TcSpecialRolesBanner.module.scss b/src/apps/profiles/src/components/tc-achievements/TcSpecialRolesBanner/TcSpecialRolesBanner.module.scss index 6de800d35..f8d3e46cd 100644 --- a/src/apps/profiles/src/components/tc-achievements/TcSpecialRolesBanner/TcSpecialRolesBanner.module.scss +++ b/src/apps/profiles/src/components/tc-achievements/TcSpecialRolesBanner/TcSpecialRolesBanner.module.scss @@ -127,6 +127,14 @@ } } +@include gtexl { + @container (min-width: 656px) { + .roleCard + .roleCard { + margin-left: $sp-10; + } + } +} + @container (max-width: 420px) { .roleCard { min-height: 58px; diff --git a/src/apps/profiles/src/components/tc-achievements/TcSpecialRolesBanner/TcSpecialRolesBanner.spec.tsx b/src/apps/profiles/src/components/tc-achievements/TcSpecialRolesBanner/TcSpecialRolesBanner.spec.tsx index a092710db..8a731a5e4 100644 --- a/src/apps/profiles/src/components/tc-achievements/TcSpecialRolesBanner/TcSpecialRolesBanner.spec.tsx +++ b/src/apps/profiles/src/components/tc-achievements/TcSpecialRolesBanner/TcSpecialRolesBanner.spec.tsx @@ -44,6 +44,16 @@ describe('TcSpecialRolesBanner styles', () => { expect(tcSpecialRolesBannerStyles).not .toMatch(/font-size: 22px;/) }) + + it('aligns the second role card with member stats on desktop', () => { + expect(tcSpecialRolesBannerStyles) + .toMatch(new RegExp( + '@include gtexl \\{[\\s\\S]*?' + + '@container \\(min-width: 656px\\) \\{[\\s\\S]*?' + + '\\.roleCard \\+ \\.roleCard \\{[\\s\\S]*?' + + 'margin-left: \\$sp-10;', + )) + }) }) /**