fix(issues): Hide overlap on avatar list (#58411)

Author: scttcper

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;
+`;

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;