Browse Source

fix(issue-stream): Hide chart at more narrow viewport sizes (#65334)

Fixes https://github.com/getsentry/sentry/issues/65103

Reverts the change in https://github.com/getsentry/sentry/pull/64820
where the chart column was hidden at higher resolutions. The behavior
now is the same as before where it is hidden at 1200px or smaller
viewport widths.
Malachi Willey 1 year ago
parent
commit
114af32154

+ 5 - 1
static/app/components/stream/group.tsx

@@ -592,7 +592,9 @@ const ChartWrapper = styled('div')<{narrowGroups: boolean}>`
   width: 200px;
   align-self: center;
 
-  @media (max-width: ${p => (p.narrowGroups ? '1600px' : p.theme.breakpoints.xlarge)}) {
+  /* prettier-ignore */
+  @media (max-width: ${p =>
+    p.narrowGroups ? p.theme.breakpoints.xlarge : p.theme.breakpoints.large}) {
     display: none;
   }
 `;
@@ -616,6 +618,7 @@ const PriorityWrapper = styled('div')<{narrowGroups: boolean}>`
   display: flex;
   justify-content: flex-end;
 
+  /* prettier-ignore */
   @media (max-width: ${p =>
     p.narrowGroups ? p.theme.breakpoints.large : p.theme.breakpoints.medium}) {
     display: none;
@@ -627,6 +630,7 @@ const AssigneeWrapper = styled('div')<{narrowGroups: boolean}>`
   margin: 0 ${space(2)};
   align-self: center;
 
+  /* prettier-ignore */
   @media (max-width: ${p =>
     p.narrowGroups ? p.theme.breakpoints.large : p.theme.breakpoints.medium}) {
     display: none;

+ 4 - 1
static/app/views/issueList/actions/headers.tsx

@@ -77,8 +77,9 @@ const GraphHeaderWrapper = styled('div')<{isSavedSearchesOpen?: boolean}>`
   margin-right: ${space(2)};
   animation: 0.25s FadeIn linear forwards;
 
+  /* prettier-ignore */
   @media (max-width: ${p =>
-    p.isSavedSearchesOpen ? '1600px' : p.theme.breakpoints.xlarge}) {
+    p.isSavedSearchesOpen ? p.theme.breakpoints.xlarge : p.theme.breakpoints.large}) {
     display: none;
   }
 
@@ -131,6 +132,7 @@ const PriorityLabel = styled('div')<{isSavedSearchesOpen?: boolean}>`
   width: 85px;
   margin: 0 ${space(2)};
 
+  /* prettier-ignore */
   @media (max-width: ${p =>
     p.isSavedSearchesOpen ? p.theme.breakpoints.large : p.theme.breakpoints.medium}) {
     display: none;
@@ -144,6 +146,7 @@ const AssigneeLabel = styled('div')<{isSavedSearchesOpen?: boolean}>`
   margin-left: ${space(2)};
   margin-right: ${space(2)};
 
+  /* prettier-ignore */
   @media (max-width: ${p =>
     p.isSavedSearchesOpen ? p.theme.breakpoints.large : p.theme.breakpoints.medium}) {
     display: none;