ref(interface-breadcrumbs): Apply feedback & fix minor issue (#28674)

static/app/components/events/interfaces/breadcrumbs/breadcrumb/index.tsx

@@ -86,6 +86,7 @@ const Wrapper = styled('div')<{error: boolean}>`
         padding-right: 0;
         padding-left: 0;
         margin-left: ${space(2)};
+        margin-right: ${space(1)};
       }
 
       /* Data */

static/app/components/events/interfaces/breadcrumbs/breadcrumb/level.tsx

@@ -15,40 +15,40 @@ const Level = memo(function Level({level, searchTerm = ''}: Props) {
   switch (level) {
     case BreadcrumbLevelType.FATAL:
       return (
-        <StyledTag type="error">
+        <LevelTag type="error">
           <Highlight text={searchTerm}>{t('Fatal')}</Highlight>
-        </StyledTag>
+        </LevelTag>
       );
     case BreadcrumbLevelType.ERROR:
       return (
-        <StyledTag type="error">
+        <LevelTag type="error">
           <Highlight text={searchTerm}>{t('Error')}</Highlight>
-        </StyledTag>
+        </LevelTag>
       );
     case BreadcrumbLevelType.INFO:
       return (
-        <StyledTag type="info">
+        <LevelTag type="info">
           <Highlight text={searchTerm}>{t('Info')}</Highlight>
-        </StyledTag>
+        </LevelTag>
       );
     case BreadcrumbLevelType.WARNING:
       return (
-        <StyledTag type="warning">
+        <LevelTag type="warning">
           <Highlight text={searchTerm}>{t('Warning')}</Highlight>
-        </StyledTag>
+        </LevelTag>
       );
     default:
       return (
-        <StyledTag>
+        <LevelTag>
           <Highlight text={searchTerm}>{level || t('Undefined')}</Highlight>
-        </StyledTag>
+        </LevelTag>
       );
   }
 });
 
 export default Level;
 
-const StyledTag = styled(Tag)`
+const LevelTag = styled(Tag)`
   height: 24px;
   display: flex;
   align-items: center;

static/app/components/events/interfaces/breadcrumbs/breadcrumb/type/index.tsx

@@ -52,6 +52,5 @@ const IconWrapper = styled('div')<Pick<Props, 'color'>>`
   color: ${p => p.theme.white};
   background: ${p => p.theme[p.color] ?? p.color};
   box-shadow: ${p => p.theme.dropShadowLightest};
-  z-index: ${p => p.theme.zIndex.breadcrumbs.iconWrapper};
   position: relative;
 `;

static/app/components/events/interfaces/breadcrumbs/breadcrumbs.tsx

@@ -168,6 +168,8 @@ const StyledPanelTable = styled(PanelTable)<{scrollbarSize: number}>`
     :nth-child(-n + 6) {
       border-bottom: 1px solid ${p => p.theme.border};
       border-radius: 0;
+      /* This is to fix a small issue with the border not being fully visible on smaller devices */
+      margin-bottom: 1px;
 
       /* Type */
       :nth-child(6n-5) {
@@ -187,14 +189,9 @@ const StyledPanelTable = styled(PanelTable)<{scrollbarSize: number}>`
   }
 
   @media (max-width: ${props => props.theme.breakpoints[0]}) {
-    grid-template-columns: 48px 1fr 74px 82px;
+    grid-template-columns: 48px 1fr 74px 82px ${p => `${p.scrollbarSize}px`};
     > * {
       :nth-child(-n + 6) {
-        /* Type */
-        :nth-child(6n-5) {
-          padding-right: 0;
-        }
-
         /* Type, Category & Level */
         :nth-child(6n-5),
         :nth-child(6n-4),
@@ -203,8 +200,7 @@ const StyledPanelTable = styled(PanelTable)<{scrollbarSize: number}>`
         }
 
         /* Description & Scrollbar */
-        :nth-child(6n-3),
-        :nth-child(6n) {
+        :nth-child(6n-3) {
           display: none;
         }
       }

static/app/components/sidebar/sidebarPanel.tsx

@@ -16,7 +16,6 @@ const PanelContainer = styled('div')<PositionProps>`
   bottom: 0;
   display: flex;
   flex-direction: column;
-  z-index: ${p => p.theme.zIndex.sidebarPanel};
   background: ${p => p.theme.background};
   color: ${p => p.theme.textColor};
   border-right: 1px solid ${p => p.theme.border};

static/app/utils/theme.tsx

@@ -481,12 +481,6 @@ const commonTheme = {
     // does not need to battle others for z-index priority
     initial: 1,
 
-    breadcrumbs: {
-      header: 2,
-      gridCellError: 1,
-      iconWrapper: 1,
-    },
-
     truncationFullValue: 10,
 
     traceView: {