[PR #14] fix: toast hidden behind modals due to stacking context #23

New issue

Open

opened 2026-03-02 05:16:37 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 05:16:37 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hiaaryan/sileo/pull/14
Author: @ssantss
Created: 2/16/2026
Status: 🔄 Open

Base: main ← Head: fix/toast-z-index-portal

📝 Commits (2)

956024c fix: render toast viewports via portal to prevent z-index issues with modals
7f9c7e2 fix: ensure toast viewports render only after component mounts

📊 Changes

2 files changed (+52 additions, -46 deletions)

View changed files

📝 src/styles.css (+1 -1)
📝 src/toast.tsx (+51 -45)

📄 Description

Problem

Toasts render inline in the DOM tree wherever <Toaster /> is placed.
When a modal or overlay with a higher z-index is open, toasts appear behind it
because of CSS stacking context limitations — no matter how high the z-index is.

Solution

Use createPortal from react-dom to render toast viewports directly into document.body
Add SSR guard (mounted state) to prevent document.body access during server-side rendering (Next.js, Remix, etc.)
Bump viewport z-index from 50 to 9999 (industry standard for notifications)

This is the same approach used by sonner, react-hot-toast, and react-toastify.

Files changed

src/toast.tsx — portal + SSR guard
src/styles.css — z-index 50 → 9999

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hiaaryan/sileo/pull/14 **Author:** [@ssantss](https://github.com/ssantss) **Created:** 2/16/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `fix/toast-z-index-portal` --- ### 📝 Commits (2) - [`956024c`](https://github.com/hiaaryan/sileo/commit/956024cbecccb588f40a7f46e45fcfce0477e116) fix: render toast viewports via portal to prevent z-index issues with modals - [`7f9c7e2`](https://github.com/hiaaryan/sileo/commit/7f9c7e271f6a157ef16de84b620ebfd1dbb23c26) fix: ensure toast viewports render only after component mounts ### 📊 Changes **2 files changed** (+52 additions, -46 deletions) <details> <summary>View changed files</summary> 📝 `src/styles.css` (+1 -1) 📝 `src/toast.tsx` (+51 -45) </details> ### 📄 Description ## Problem Toasts render inline in the DOM tree wherever `<Toaster />` is placed. When a modal or overlay with a higher z-index is open, toasts appear behind it because of CSS stacking context limitations — no matter how high the z-index is. ## Solution - Use `createPortal` from `react-dom` to render toast viewports directly into `document.body` - Add SSR guard (`mounted` state) to prevent `document.body` access during server-side rendering (Next.js, Remix, etc.) - Bump viewport z-index from `50` to `9999` (industry standard for notifications) This is the same approach used by sonner, react-hot-toast, and react-toastify. ## Files changed - `src/toast.tsx` — portal + SSR guard - `src/styles.css` — z-index 50 → 9999 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>