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

evanpurkhiser · 2025-08-21T16:33:28Z

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.

codecov · 2025-08-21T16:49:00Z

❌ 5 Tests Failed:

Tests completed	Failed	Passed	Skipped
11443	5	11438	10

View the top 3 failed test(s) by shortest run time

IssueListOverview (actions) mark reviewed removes issues after making reviewed (when on for review tab)

Stack Traces | 1.57s run time

TestingLibraryElementError: Unable to find an accessible element with the role "checkbox" and name `/select issue/i`

Here are the accessible roles:

  presentation:

  Name "":
  ...

  --------------------------------------------------link:

  Name "Group 1":
  ...

  Name "View Project Details":
  ...

  --------------------------------------------------
  img:

  Name "":
  ...

  --------------------------------------------------presentation:

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------
  button:

  Name "Modify issue priority":
  ...

  --------------------------------------------------
  img:

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------button:

  Name "Modify issue assignee":
  ...

  Name "Invite Member":
  ...

  --------------------------------------------------
  presentation:

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------
  img:

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------
  textbox:

  Name "":
  ...

  --------------------------------------------------
  listbox:

  Name "":
  ...

  --------------------------------------------------
  paragraph:

  Name "":
  ...

  --------------------------------------------------

Ignored nodes: comments, script, style
...
    at Object.getElementError (.../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../dom/dist/config.js:37:19)
    at .../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../dom/dist/query-helpers.js:76:38
    at .../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../dom/dist/query-helpers.js:52:17
    at .../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../dom/dist/query-helpers.js:95:19
    at Object.getByRole (.../views/issueList/overview.actions.spec.tsx:329:28)
    at runNextTicks (node:internal/process/task_queues:65:5)
    at processTimers (node:internal/timers:520:9)

IssueListOverview (actions) priority removes issues after bulk reprioritizing (when excluding priorities)

Stack Traces | 1.64s run time

TestingLibraryElementError: Unable to find an accessible element with the role "checkbox" and name `/select issue/i`

Here are the accessible roles:

  presentation:

  Name "":
  ...

  --------------------------------------------------link:

  Name "Medium priority issue":
  ...

  Name "View Project Details":
  ...

  --------------------------------------------------
  img:

  Name "":
  ...

  --------------------------------------------------presentation:

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------
  button:

  Name "Modify issue priority":
  ...

  --------------------------------------------------
  img:

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------button:

  Name "Modify issue assignee":
  ...

  Name "Invite Member":
  ...

  --------------------------------------------------
  presentation:

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------
  img:

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------
  textbox:

  Name "":
  ...

  --------------------------------------------------
  listbox:

  Name "":
  ...

  --------------------------------------------------
  paragraph:

  Name "":
  ...

  --------------------------------------------------

Ignored nodes: comments, script, style
...
    at Object.getElementError (.../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../dom/dist/config.js:37:19)
    at .../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../dom/dist/query-helpers.js:76:38
    at .../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../dom/dist/query-helpers.js:52:17
    at .../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../dom/dist/query-helpers.js:95:19
    at Object.getByRole (.../views/issueList/overview.actions.spec.tsx:397:28)

IssueListOverview (actions) priority does not remove issues after bulk reprioritizing (when query includes all priorities)

Stack Traces | 1.69s run time

TestingLibraryElementError: Unable to find an accessible element with the role "checkbox" and name `/select issue/i`

Here are the accessible roles:

  presentation:

  Name "":
  ...

  --------------------------------------------------link:

  Name "Medium priority issue":
  ...

  Name "View Project Details":
  ...

  --------------------------------------------------
  img:

  Name "":
  ...

  --------------------------------------------------presentation:

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------
  button:

  Name "Modify issue priority":
  ...

  --------------------------------------------------
  img:

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------button:

  Name "Modify issue assignee":
  ...

  Name "Invite Member":
  ...

  --------------------------------------------------
  presentation:

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------
  img:

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------
  textbox:

  Name "":
  ...

  --------------------------------------------------
  listbox:

  Name "":
  ...

  --------------------------------------------------
  paragraph:

  Name "":
  ...

  --------------------------------------------------

Ignored nodes: comments, script, style
...
    at Object.getElementError (.../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../dom/dist/config.js:37:19)
    at .../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../dom/dist/query-helpers.js:76:38
    at .../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../dom/dist/query-helpers.js:52:17
    at .../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../dom/dist/query-helpers.js:95:19
    at Object.getByRole (.../views/issueList/overview.actions.spec.tsx:491:28)
    at runNextTicks (node:internal/process/task_queues:65:5)
    at processTimers (node:internal/timers:520:9)

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

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.

evanpurkhiser requested a review from a team as a code owner August 21, 2025 16:33

evanpurkhiser requested review from a team and removed request for a team August 21, 2025 16:33

vercel bot deployed to Preview August 21, 2025 16:35 View deployment

This comment was marked as outdated.

Sign in to view

malwilley approved these changes Aug 21, 2025

View reviewed changes

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Aug 21, 2025

evanpurkhiser force-pushed the evanpurkhiser/fix-ui-consistently-use-min-width-media-queries branch from c56d4e2 to 4faad5b Compare August 25, 2025 14:35

evanpurkhiser requested a review from a team as a code owner August 25, 2025 14:35

vercel bot deployed to Preview August 25, 2025 14:37 View deployment

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

9285a1c

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.

evanpurkhiser force-pushed the evanpurkhiser/fix-ui-consistently-use-min-width-media-queries branch from 4faad5b to 9285a1c Compare August 25, 2025 18:01

vercel bot deployed to Preview August 25, 2025 18:17 View deployment

evanpurkhiser merged commit 4b3fe28 into master Aug 25, 2025
45 checks passed

evanpurkhiser deleted the evanpurkhiser/fix-ui-consistently-use-min-width-media-queries branch August 25, 2025 18:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

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

Uh oh!

evanpurkhiser commented Aug 21, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

codecov bot commented Aug 21, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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

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

Uh oh!

Conversation

evanpurkhiser commented Aug 21, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

codecov bot commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ 5 Tests Failed:

Uh oh!

Uh oh!

Uh oh!

codecov bot commented Aug 21, 2025 •

edited

Loading