From 464e8af57fe63d93bf729a2940a9cf7661817603 Mon Sep 17 00:00:00 2001
From: Mariano Fuentes <marfuen98@gmail.com>
Date: Wed, 20 May 2026 11:06:01 -0400
Subject: [PATCH 1/2] fix(people): ds component compatibility fixes for
 offboarding UI

- remove redundant wrapper divs from PopoverContent (DS already renders
  card chrome)
- remove className from PopoverContent (not accepted by DS)
- use render prop on DropdownMenuTrigger to avoid nested buttons
- use accent variant for Critical badge instead of destructive

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/OffboardingChecklistItem.tsx   |  2 +-
 .../all/components/TeamMembersClient.tsx      | 40 ++++++++-----------
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/apps/app/src/app/(app)/[orgId]/people/[employeeId]/components/OffboardingChecklistItem.tsx b/apps/app/src/app/(app)/[orgId]/people/[employeeId]/components/OffboardingChecklistItem.tsx
index 88fa5f209..b84cd9277 100644
--- a/apps/app/src/app/(app)/[orgId]/people/[employeeId]/components/OffboardingChecklistItem.tsx
+++ b/apps/app/src/app/(app)/[orgId]/people/[employeeId]/components/OffboardingChecklistItem.tsx
@@ -92,7 +92,7 @@ function ItemBadges({
     <>
       {item.isAccessRevocation && (
         <div>
-          <Badge variant="destructive">Critical</Badge>
+          <Badge variant="accent">Critical</Badge>
         </div>
       )}
       {item.evidenceRequired && (
diff --git a/apps/app/src/app/(app)/[orgId]/people/all/components/TeamMembersClient.tsx b/apps/app/src/app/(app)/[orgId]/people/all/components/TeamMembersClient.tsx
index 07dca17c4..c15587e68 100644
--- a/apps/app/src/app/(app)/[orgId]/people/all/components/TeamMembersClient.tsx
+++ b/apps/app/src/app/(app)/[orgId]/people/all/components/TeamMembersClient.tsx
@@ -661,8 +661,7 @@ function DateRangeFilter({
           </div>
         </PopoverTrigger>
         <PopoverContent align="start">
-          <div className="w-[420px] border bg-background p-4 shadow-md rounded-lg">
-          <div className="flex flex-col gap-4">
+          <div className="flex w-[380px] flex-col gap-4 p-1.5">
             <span className="text-[10px] font-bold uppercase tracking-[0.08em] text-muted-foreground">
               {label} between
             </span>
@@ -693,16 +692,14 @@ function DateRangeFilter({
                   </div>
                 </PopoverTrigger>
                 <PopoverContent align="start">
-                  <div className="w-auto border bg-background p-0 shadow-md rounded-lg">
-                    <Calendar
-                      mode="single"
-                      selected={draftFrom}
-                      onSelect={(d) => { setDraftFrom(d ?? undefined); setActivePreset(null); setFromPickerOpen(false); }}
-                      captionLayout="dropdown"
-                      fromYear={2000}
-                      toYear={new Date().getFullYear() + 1}
-                    />
-                  </div>
+                  <Calendar
+                    mode="single"
+                    selected={draftFrom}
+                    onSelect={(d) => { setDraftFrom(d ?? undefined); setActivePreset(null); setFromPickerOpen(false); }}
+                    captionLayout="dropdown"
+                    fromYear={2000}
+                    toYear={new Date().getFullYear() + 1}
+                  />
                 </PopoverContent>
               </Popover>
               <span className="text-muted-foreground">→</span>
@@ -714,16 +711,14 @@ function DateRangeFilter({
                   </div>
                 </PopoverTrigger>
                 <PopoverContent align="start">
-                  <div className="w-auto border bg-background p-0 shadow-md rounded-lg">
-                    <Calendar
-                      mode="single"
-                      selected={draftTo}
-                      onSelect={(d) => { setDraftTo(d ?? undefined); setActivePreset(null); setToPickerOpen(false); }}
-                      captionLayout="dropdown"
-                      fromYear={2000}
-                      toYear={new Date().getFullYear() + 1}
-                    />
-                  </div>
+                  <Calendar
+                    mode="single"
+                    selected={draftTo}
+                    onSelect={(d) => { setDraftTo(d ?? undefined); setActivePreset(null); setToPickerOpen(false); }}
+                    captionLayout="dropdown"
+                    fromYear={2000}
+                    toYear={new Date().getFullYear() + 1}
+                  />
                 </PopoverContent>
               </Popover>
             </div>
@@ -737,7 +732,6 @@ function DateRangeFilter({
               </div>
             </div>
           </div>
-          </div>
         </PopoverContent>
       </Popover>
     </div>

From 7dc8e374f18c5fb71a766d51b4d804e1dcefad8a Mon Sep 17 00:00:00 2001
From: Mariano Fuentes <marfuen98@gmail.com>
Date: Wed, 20 May 2026 14:41:22 -0400
Subject: [PATCH 2/2] fix(people): override popover width for date range filter

DS PopoverContent has hardcoded w-72 which clips the 380px filter
content. Use inline style to override width to auto.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../(app)/[orgId]/people/all/components/TeamMembersClient.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/app/(app)/[orgId]/people/all/components/TeamMembersClient.tsx b/apps/app/src/app/(app)/[orgId]/people/all/components/TeamMembersClient.tsx
index c15587e68..8c23d36d6 100644
--- a/apps/app/src/app/(app)/[orgId]/people/all/components/TeamMembersClient.tsx
+++ b/apps/app/src/app/(app)/[orgId]/people/all/components/TeamMembersClient.tsx
@@ -660,7 +660,7 @@ function DateRangeFilter({
             <ChevronDown size={12} className="text-muted-foreground" />
           </div>
         </PopoverTrigger>
-        <PopoverContent align="start">
+        <PopoverContent align="start" style={{ width: 'auto' }}>
           <div className="flex w-[380px] flex-col gap-4 p-1.5">
             <span className="text-[10px] font-bold uppercase tracking-[0.08em] text-muted-foreground">
               {label} between