From d8c53922ab2aa2f7dabf6337e840e12b27929232 Mon Sep 17 00:00:00 2001
From: Scott Cooper <scttcper@gmail.com>
Date: Wed, 18 Oct 2023 15:57:21 -0700
Subject: [PATCH] fix(issues): Hide overlap on avatar list

Hides the overlap when shrinking and reduces movement by applying padding all the time
---
 static/app/views/issueDetails/groupSidebar.tsx    | 13 +++++++++----
 static/app/views/issueDetails/participantList.tsx |  5 +++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/static/app/views/issueDetails/groupSidebar.tsx b/static/app/views/issueDetails/groupSidebar.tsx
index f1f16702e10947..d9a921a96a52e0 100644
--- a/static/app/views/issueDetails/groupSidebar.tsx
+++ b/static/app/views/issueDetails/groupSidebar.tsx
@@ -185,7 +185,7 @@ export default function GroupSidebar({
     );
 
     return (
-      <SidebarSection.Wrap>
+      <SmallerSidebarWrap>
         <SidebarSection.Title>
           {t('Participants')} <TitleNumber>({getParticipantTitle()})</TitleNumber>
           <QuestionTooltip
@@ -215,7 +215,7 @@ export default function GroupSidebar({
             />
           )}
         </SidebarSection.Content>
-      </SidebarSection.Wrap>
+      </SmallerSidebarWrap>
     );
   };
 
@@ -244,7 +244,7 @@ export default function GroupSidebar({
     );
 
     return (
-      <SidebarSection.Wrap>
+      <SmallerSidebarWrap>
         <SidebarSection.Title>
           {t('Viewers')}
           <TitleNumber>({displayUsers.length})</TitleNumber>
@@ -263,7 +263,7 @@ export default function GroupSidebar({
             avatars
           )}
         </SidebarSection.Content>
-      </SidebarSection.Wrap>
+      </SmallerSidebarWrap>
     );
   };
 
@@ -335,3 +335,8 @@ const StyledAvatarList = styled(AvatarList)`
 const TitleNumber = styled('span')`
   font-weight: normal;
 `;
+
+// Using 22px + space(1) = space(4)
+const SmallerSidebarWrap = styled(SidebarSection.Wrap)`
+  margin-bottom: 22px;
+`;
diff --git a/static/app/views/issueDetails/participantList.tsx b/static/app/views/issueDetails/participantList.tsx
index c03c62feb3977b..bbf33a45d01582 100644
--- a/static/app/views/issueDetails/participantList.tsx
+++ b/static/app/views/issueDetails/participantList.tsx
@@ -80,8 +80,8 @@ export function ParticipantList({teams = [], users, children}: ParticipantListPr
         {isExpanded && (
           <motion.div
             variants={{
-              open: {height: '100%', opacity: 1, marginTop: space(1)},
-              closed: {height: '0', opacity: 0, marginTop: 0},
+              open: {height: '100%', opacity: 1, overflow: 'initial'},
+              closed: {height: '0', opacity: 0, overflow: 'hidden'},
             }}
             initial="closed"
             animate="open"
@@ -100,6 +100,7 @@ const ParticipantWrapper = styled('div')`
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
+  padding-bottom: ${space(1)};
 
   & > span {
     cursor: pointer;