fix(ui): reduced size of important tags (#26805)

* fix(ui): reduced size of important tags

* fixed spacing of elements

* fixed mobile styles and tidied up visual spacing

* removed tags heading from event details page

static/app/components/events/contextSummary/contextSummary.tsx

@@ -98,13 +98,9 @@ class ContextSummary extends React.Component<Props> {
 export default ContextSummary;
 
 const Wrapper = styled('div')`
-  border-top: 1px solid ${p => p.theme.innerBorder};
-
   @media (min-width: ${p => p.theme.breakpoints[0]}) {
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: minmax(0, auto);
-    grid-gap: ${space(4)};
-    padding: 25px ${space(4)} 25px 40px;
+    display: flex;
+    gap: ${space(3)};
+    margin-bottom: ${space(2)};
   }
 `;

static/app/components/events/contextSummary/contextSummaryUser.tsx

@@ -97,7 +97,7 @@ const ContextSummaryUser = ({data}: Props) => {
   const icon = userTitle ? (
     <UserAvatar
       user={user as AvatarUser}
-      size={48}
+      size={32}
       className="context-item-icon"
       gravatar={false}
     />

static/app/components/events/contextSummary/item.tsx

@@ -20,21 +20,23 @@ const Item = ({children, icon, className}: Props) => (
 export default Item;
 
 const Details = styled('div')`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   max-width: 100%;
   min-height: 48px;
 `;
 
 const Wrapper = styled('div')`
   border-top: 1px solid ${p => p.theme.innerBorder};
-  padding: ${space(2)} 0 ${space(2)} 64px;
+  padding: 4px 0 4px 40px;
   display: flex;
+  margin-right: ${space(3)};
   align-items: center;
   position: relative;
-  min-height: 67px;
 
   @media (min-width: ${p => p.theme.breakpoints[0]}) {
     border: 0;
-    padding: ${space(0.5)} 0px 0px 64px;
-    min-height: 48px;
+    padding: 0px 0px 0px 42px;
   }
 `;

static/app/components/events/eventDataSection.tsx

@@ -132,7 +132,7 @@ const SectionHeader = styled('div')<{isCentered?: boolean}>`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-bottom: ${space(2)};
+  margin-bottom: ${space(1)};
 
   > * {
     margin-bottom: ${space(0.5)};

static/app/components/events/eventEntries.tsx

@@ -373,15 +373,17 @@ class EventEntries extends Component<Props, State> {
             includeBorder={!hasErrors}
           />
         )}
-        {hasContext && showTagSummary && <EventContextSummary event={event} />}
         {showTagSummary && (
-          <EventTags
-            event={event}
-            organization={organization as Organization}
-            projectId={project.slug}
-            location={location}
-            hasQueryFeature={hasQueryFeature}
-          />
+          <StyledEventDataSection title={t('Tags')} type="tags">
+            {hasContext && <EventContextSummary event={event} />}
+            <EventTags
+              event={event}
+              organization={organization as Organization}
+              projectId={project.slug}
+              location={location}
+              hasQueryFeature={hasQueryFeature}
+            />
+          </StyledEventDataSection>
         )}
         {this.renderEntries(event)}
         {hasContext && <EventContexts group={group} event={event} />}
@@ -455,6 +457,10 @@ const StyledEventUserFeedback = styled(EventUserFeedback)<StyledEventUserFeedbac
   margin: 0;
 `;
 
+const StyledEventDataSection = styled(EventDataSection)`
+  margin-bottom: ${space(2)};
+`;
+
 // TODO(ts): any required due to our use of SharedViewOrganization
 export default withOrganization<any>(withApi(EventEntries));
 export {BorderlessEventEntries};

static/app/components/events/eventTags/eventTags.tsx

@@ -1,11 +1,7 @@
-import styled from '@emotion/styled';
 import {Location} from 'history';
 import isEmpty from 'lodash/isEmpty';
 
-import EventDataSection from 'app/components/events/eventDataSection';
 import Pills from 'app/components/pills';
-import {t} from 'app/locale';
-import space from 'app/styles/space';
 import {Organization} from 'app/types';
 import {Event} from 'app/types/event';
 import {defined, generateQueryWithTag} from 'app/utils';
@@ -36,29 +32,21 @@ const EventTags = ({
   const releasesPath = `/organizations/${orgSlug}/releases/`;
 
   return (
-    <StyledEventDataSection title={t('Tags')} type="tags">
-      <Pills>
-        {tags.map((tag, index) => (
-          <EventTagsPill
-            key={!defined(tag.key) ? `tag-pill-${index}` : tag.key}
-            tag={tag}
-            projectId={projectId}
-            organization={organization}
-            query={generateQueryWithTag(location.query, tag)}
-            streamPath={streamPath}
-            releasesPath={releasesPath}
-            hasQueryFeature={hasQueryFeature}
-          />
-        ))}
-      </Pills>
-    </StyledEventDataSection>
+    <Pills>
+      {tags.map((tag, index) => (
+        <EventTagsPill
+          key={!defined(tag.key) ? `tag-pill-${index}` : tag.key}
+          tag={tag}
+          projectId={projectId}
+          organization={organization}
+          query={generateQueryWithTag(location.query, tag)}
+          streamPath={streamPath}
+          releasesPath={releasesPath}
+          hasQueryFeature={hasQueryFeature}
+        />
+      ))}
+    </Pills>
   );
 };
 
 export default EventTags;
-
-const StyledEventDataSection = styled(EventDataSection)`
-  @media (min-width: ${p => p.theme.breakpoints[1]}) {
-    margin-bottom: ${space(3)};
-  }
-`;

static/less/group-detail.less

@@ -161,28 +161,23 @@
     .context-item-icon {
       position: absolute;
       left: 0;
-      top: 0;
-      width: 48px;
-      height: 48px;
+      width: 36px;
+      height: 36px;
       background-repeat: no-repeat;
-      background-position: center;
+      background-position: center 2px;
       background-image: url(~sentry-logos/logo-unknown.svg);
-      background-size: 48px 48px;
+      background-size: 30px 32px; // magic number here because some logos are slightly cut off when at 32 x 32
     }
 
     &:first-child {
       border: 0;
     }
 
-    h3,
-    p {
-      margin: 0 0 4px;
-    }
-
     h3 {
       .truncate;
       font-size: 16px;
       line-height: 1.2;
+      margin-bottom: 0;
     }
 
     p {
@@ -280,13 +275,12 @@
     &.watchos {
       .context-item-icon {
         background-image: url(~sentry-logos/logo-apple.svg);
-        top: -2px;
+        background-position: center 0;
       }
     }
 
     &.android .context-item-icon {
       background-image: url(~sentry-logos/logo-android.svg);
-      top: -1px;
     }
 
     &.windows .context-item-icon {
@@ -1407,12 +1401,7 @@ ul.crumbs {
     flex-direction: column;
     margin-top: 0;
     padding: 0;
-
-    .context-item {
-      .context-item-icon {
-        top: 9px;
-      }
-    }
+    margin-bottom: 20px;
   }
 
   .context {