{displayFlags.map(flag => (
diff --git a/static/app/views/issueDetails/groupTags/tagDistribution.tsx b/static/app/views/issueDetails/groupTags/tagDistribution.tsx
index c37b590d635fef..25439ce88f8c20 100644
--- a/static/app/views/issueDetails/groupTags/tagDistribution.tsx
+++ b/static/app/views/issueDetails/groupTags/tagDistribution.tsx
@@ -28,7 +28,7 @@ export function TagDistribution({tag}: {tag: GroupTag}) {
- {tag.key}
+ {tag.key}
@@ -100,28 +100,23 @@ export function TagBar({
}
const TagPanel = styled('div')`
- display: block;
+ display: flex;
+ flex-direction: column;
+ gap: ${space(0.5)};
border-radius: ${p => p.theme.borderRadius};
border: 1px solid ${p => p.theme.border};
padding: ${space(1)};
`;
const TagHeader = styled('h5')`
- grid-area: header;
- display: flex;
- justify-content: space-between;
- margin-bottom: ${space(0.5)};
color: ${p => p.theme.textColor};
-`;
-
-const TagTitle = styled('div')`
font-size: ${p => p.theme.fontSizeMedium};
font-weight: ${p => p.theme.fontWeightBold};
+ margin: 0;
${p => p.theme.overflowEllipsis}
`;
-// The 40px is a buffer to prevent percentages from overflowing
-const progressBarWidth = '45px';
+const progressBarWidth = '45px'; // Prevent percentages from overflowing
const TagValueContent = styled('div')`
display: grid;
grid-template-columns: 4fr auto ${progressBarWidth};
@@ -144,7 +139,6 @@ const TagValue = styled('div')`
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
- margin-right: ${space(0.5)};
`;
const TagBarPlaceholder = styled('div')`