Ensure toast messages are not obscured by dialog tabs

b488fafb · Lyza Danger Gardner · Lyza Gardner · eda8c127 · b488fafb
Commit b488fafb authored Jul 25, 2023 by Lyza Danger Gardner Committed by Lyza Gardner Jul 26, 2023
Hide whitespace changes
Inline Side-by-side

Showing with 6 additions and 1 deletion

BaseToastMessages.tsx src/shared/components/BaseToastMessages.tsx +6 -1

No files found.
--- a/src/shared/components/BaseToastMessages.tsx
+++ b/src/shared/components/BaseToastMessages.tsx
@@ -86,7 +86,12 @@ export default function BaseToastMessages({
      <ul
        aria-live="polite"
        aria-relevant="additions"
-        className="absolute z-2 left-0 w-full"
+        className={classnames(
+          // Set an aggressive z-index as we want to ensure toast messages are
+          // rendered above other content
+          'z-10',
+          'absolute left-0 w-full'
+        )}
      >
        {messages.map(message => (
          <li