From 53570929c839135c55226a624fbf9e9af6fcc110 Mon Sep 17 00:00:00 2001
From: jerryzhou196 <jerry.zhou@sentry.io>
Date: Fri, 28 Nov 2025 14:15:29 -0500
Subject: [PATCH 1/2] refactor(platformList): Simplify styling and remove
 unused components

- Consolidated common styles for platform icons and counters.
- Removed InnerWrapper and Counter components to streamline the layout.
- Updated styling to enhance hover effects and maintain consistent sizing for platform icons.
---
 .../app/components/core/avatar/avatarList.tsx |  1 -
 static/app/components/platformList.tsx        | 48 ++++---------------
 2 files changed, 8 insertions(+), 41 deletions(-)

diff --git a/static/app/components/core/avatar/avatarList.tsx b/static/app/components/core/avatar/avatarList.tsx
index ef744c87d29a2f..efc49d37762e20 100644
--- a/static/app/components/core/avatar/avatarList.tsx
+++ b/static/app/components/core/avatar/avatarList.tsx
@@ -165,7 +165,6 @@ const AvatarListWrapper = styled('div')`
 
 const AvatarStyle = (p: {theme: Theme}) => css`
   border: 2px solid ${p.theme.background};
-  margin-left: -8px;
   cursor: default;
 
   &:hover {
diff --git a/static/app/components/platformList.tsx b/static/app/components/platformList.tsx
index 8e8de327bbe080..84414b7a1e9b5e 100644
--- a/static/app/components/platformList.tsx
+++ b/static/app/components/platformList.tsx
@@ -1,4 +1,3 @@
-import type {Theme} from '@emotion/react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 import {PlatformIcon} from 'platformicons';
@@ -62,41 +61,19 @@ function getOverlapWidth(size: number) {
   return Math.round(size / 4);
 }
 
-const commonStyles = ({theme}: {theme: Theme}) => css`
-  cursor: default;
-  border-radius: ${theme.borderRadius};
-  box-shadow: 0 0 0 1px ${theme.background};
-  :hover {
-    z-index: 1;
-  }
-`;
-
 const PlatformIcons = styled('div')`
   display: flex;
 `;
 
-const InnerWrapper = styled('div')`
-  display: flex;
-  position: relative;
-`;
-
 const StyledPlatformIcon = styled(PlatformIcon)`
-  ${p => commonStyles(p)};
-`;
-
-const Counter = styled('div')`
-  ${p => commonStyles(p)};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  font-weight: ${p => p.theme.fontWeight.bold};
-  font-size: ${p => p.theme.fontSize.xs};
-  background-color: ${p => p.theme.gray200};
-  color: ${p => p.theme.subText};
-  padding: 0 1px;
-  position: absolute;
-  right: -1px;
+  cursor: default;
+  border-radius: ${p => p.theme.borderRadius};
+  box-shadow: 0 0 0 1px ${p => p.theme.background};
+  :hover {
+    z-index: 1;
+  }
+  height: ${p => p.size}px;
+  min-width: ${p => p.size}px;
 `;
 
 const Wrapper = styled('div')<WrapperProps>`
@@ -111,13 +88,4 @@ const Wrapper = styled('div')<WrapperProps>`
       }
     `}
   }
-
-  ${InnerWrapper} {
-    padding-right: ${p => p.size / 2 + 1}px;
-  }
-
-  ${Counter} {
-    height: ${p => p.size}px;
-    min-width: ${p => p.size}px;
-  }
 `;

From 378a7cda816315d335a3453a801e3878d07a8dbf Mon Sep 17 00:00:00 2001
From: jerryzhou196 <jerry.zhou@sentry.io>
Date: Fri, 28 Nov 2025 14:19:11 -0500
Subject: [PATCH 2/2] undo avatar list change

---
 static/app/components/core/avatar/avatarList.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/static/app/components/core/avatar/avatarList.tsx b/static/app/components/core/avatar/avatarList.tsx
index efc49d37762e20..ef744c87d29a2f 100644
--- a/static/app/components/core/avatar/avatarList.tsx
+++ b/static/app/components/core/avatar/avatarList.tsx
@@ -165,6 +165,7 @@ const AvatarListWrapper = styled('div')`
 
 const AvatarStyle = (p: {theme: Theme}) => css`
   border: 2px solid ${p.theme.background};
+  margin-left: -8px;
   cursor: default;
 
   &:hover {