From 0ee5541e269250911a7a4ed3aede0775c1bbf821 Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Mon, 10 Aug 2026 09:33:29 +1000
Subject: [PATCH] PM-5827: Align Copilot pill with member stats

What was broken

On desktop profiles with reviewer and copilot roles, the Copilot pill began 40px to the left of the Member Stats card.

Root cause (if identifiable)

The role pills use an equal grid with a 16px gap, while TCO and Member Stats use an asymmetric flex row with a 32px gap. The independent layouts produced different second-column offsets.

What was changed

Inset only the second role card by 40px when both the desktop and two-column container thresholds are met, preserving its right edge and leaving single-role and stacked layouts unchanged.

Any added/updated tests

Added a stylesheet regression assertion for the guarded desktop second-card alignment. All 80 Profiles tests, lint, and the production build pass. The full repository suite was also run; 18 unrelated suites fail in areas untouched by this ticket.
---
 .../TcSpecialRolesBanner.module.scss                   |  8 ++++++++
 .../TcSpecialRolesBanner/TcSpecialRolesBanner.spec.tsx | 10 ++++++++++
 2 files changed, 18 insertions(+)

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;',
+            ))
+    })
 })
 
 /**