fix(ui): Consistently use min-width media queries

Because we were using a mix of `max-width` and `min-width` media queries
at the specific pixel size of the query one would apply but not the
other, in some cases causing the layout to completely break.

Author: evanpurkhiser

static/app/components/profiling/flamegraph/flamegraph.spec.tsx

@@ -92,20 +92,6 @@ const flamechart = {
   version: '1',
 };
 
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation(query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // Deprecated
-    removeListener: jest.fn(), // Deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-});
-
 describe('Flamegraph', () => {
   beforeEach(() => {
     const project = ProjectFixture({slug: 'foo-project'});

static/app/views/issueList/actions/index.tsx

@@ -179,7 +179,7 @@ function IssueListActions({
   const theme = useTheme();
 
   const disableActions = useMedia(
-    `(max-width: ${isSavedSearchesOpen ? theme.breakpoints.xl : theme.breakpoints.md})`
+    `(width < ${isSavedSearchesOpen ? theme.breakpoints.xl : theme.breakpoints.md})`
   );
 
   const numIssues = selectedIdsSet.size;

static/app/views/issueList/groupListBody.tsx

@@ -100,8 +100,8 @@ function GroupList({
     false
   );
   const topIssue = groupIds[0];
-  const canSelect = !useMedia(
-    `(max-width: ${isSavedSearchesOpen ? theme.breakpoints.xl : theme.breakpoints.md})`
+  const canSelect = useMedia(
+    `(min-width: ${isSavedSearchesOpen ? theme.breakpoints.xl : theme.breakpoints.md})`
   );
 
   const columns: GroupListColumn[] = [

static/app/views/nav/context.tsx

@@ -56,7 +56,7 @@ export function NavContextProvider({children}: {children: React.ReactNode}) {
     useState<PrimaryNavGroup | null>(null);
 
   const theme = useTheme();
-  const isMobile = useMedia(`(max-width: ${theme.breakpoints.md})`);
+  const isMobile = useMedia(`(width < ${theme.breakpoints.md})`);
 
   const startInteraction = useCallback(() => {
     isInteractingRef.current = true;

static/app/views/nav/index.spec.tsx

@@ -10,6 +10,7 @@ import {
   waitFor,
   within,
 } from 'sentry-test/reactTestingLibrary';
+import {mockMatchMedia} from 'sentry-test/utils';
 
 import ConfigStore from 'sentry/stores/configStore';
 import {trackAnalytics} from 'sentry/utils/analytics';
@@ -336,23 +337,12 @@ describe('Nav', () => {
   });
 
   describe('mobile navigation', () => {
-    const initialMatchMedia = window.matchMedia;
     beforeEach(() => {
-      // Need useMedia() to return true for isMobile query
-      window.matchMedia = jest.fn().mockImplementation(query => ({
-        matches: true,
-        media: query,
-        onchange: null,
-        addListener: jest.fn(),
-        removeListener: jest.fn(),
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      }));
+      mockMatchMedia(true);
     });
 
     afterEach(() => {
-      window.matchMedia = initialMatchMedia;
+      jest.restoreAllMocks();
     });
 
     it('renders mobile navigation on small screen sizes', async () => {

static/app/views/profiling/profileSummary/profileSummaryPage.spec.tsx

@@ -4,24 +4,11 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {mockMatchMedia} from 'sentry-test/utils';
 
 import OrganizationStore from 'sentry/stores/organizationStore';
 import ProfileSummaryPage from 'sentry/views/profiling/profileSummary';
 
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation(query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // Deprecated
-    removeListener: jest.fn(), // Deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-});
-
 window.ResizeObserver =
   window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
@@ -31,6 +18,14 @@ window.ResizeObserver =
   }));
 
 describe('ProfileSummaryPage', () => {
+  beforeEach(() => {
+    mockMatchMedia(true);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
   it('renders new page', async () => {
     const organization = OrganizationFixture({features: []});
     OrganizationStore.onUpdate(organization);

tests/js/sentry-test/utils.tsx

@@ -51,3 +51,19 @@ export function setWindowLocation(url: string) {
   // global jsdom is coming from `@sentry/jest-environment`
   (global as any).jsdom.reconfigure({url});
 }
+
+/**
+ * Mocks window.matchMedia to always return the provided `matches`.
+ */
+export function mockMatchMedia(matches: boolean) {
+  jest.spyOn(window, 'matchMedia').mockImplementation(() => ({
+    matches,
+    media: '',
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  }));
+}

tests/js/setup.ts

@@ -238,6 +238,20 @@ Object.defineProperty(window, 'getComputedStyle', {
   writable: true,
 });
 
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  }),
+});
+
 window.IntersectionObserver = class IntersectionObserver {
   root = null;
   rootMargin = '';