fix(ui) Defined breadcrumbs columns size (#18945)

src/sentry/static/sentry/app/components/events/interfaces/breadcrumbsV2/breadcrumbTime.tsx

@@ -5,6 +5,7 @@ import moment from 'moment';
 import {defined} from 'app/utils';
 import Tooltip from 'app/components/tooltip';
 import getDynamicText from 'app/utils/getDynamicText';
+import overflowEllipsis from 'app/styles/overflowEllipsis';
 
 const getBreadcrumbTimeTooltipTitle = (timestamp: string) => {
   const parsedTimestamp = moment(timestamp);
@@ -33,4 +34,5 @@ export default BreadcrumbTime;
 const Time = styled('div')`
   font-size: ${p => p.theme.fontSizeSmall};
   color: ${p => p.theme.gray4};
+  ${overflowEllipsis};
 `;

src/sentry/static/sentry/app/components/events/interfaces/breadcrumbsV2/styles.tsx

@@ -55,6 +55,7 @@ const GridCell = styled('div')<{
 `;
 
 const GridCellLeft = styled(GridCell)`
+  padding: ${space(1)} ${space(0.5)} ${space(1)} ${space(1)};
   position: relative;
   :before {
     content: '';
@@ -78,9 +79,9 @@ const Grid = styled('div')<{maxHeight?: React.CSSProperties['maxHeight']}>`
   > *:nth-last-child(5):before {
     bottom: calc(100% - ${space(1)});
   }
-  grid-template-columns: max-content 55px 1fr max-content max-content;
+  grid-template-columns: 45px 55px 1fr 76px 65px;
   @media (min-width: ${p => p.theme.breakpoints[0]}) {
-    grid-template-columns: max-content 110px 1fr max-content max-content;
+    grid-template-columns: 65px 110px 1fr 94px 84px;
   }
 `;