Skip to content

a11y: fix code monitor create/edit pages for narrow screens

Administrator requested to merge jp/codemonitorscreateeditmobile into main

Created by: limitedmage

Closes #35733 (closed)

Another low-cost, best-effort approach of making pages usable at narrow screen sizes.

  • Pages are now full-width at the XS size
  • In the expanded trigger card, query input and preview links are now vertically placed at the XS size
  • In the expanded trigger card, validation checkboxes no longer shrink
  • In the collapsed trigger and actions cards, the content now wraps so the edit button is now below the title at smaller sizes
  • In the action card titles for Slack and Webhooks, the "Beta" badges now wrap with the content
  • In the expanded action cards, buttons at the bottom now wrap at smaller sizes instead of having an odd placement

image

image

image

Test plan

Verify create and edit code monitor pages at 320px width

App preview:

Check out the client app preview documentation to learn more.

Merge request reports