Merge pull request #28 from Pettor/bugfix/pwa-z-index

fix: pwa z-index should always be at top
Pettor · Mar 5, 2024 · 13a6e29 · 13a6e29
2 parents d82ab62 + 8078a4b
commit 13a6e29
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 8 deletions.
diff --git a/src/components/library/pwa/PwaProvider.tsx b/src/components/library/pwa/PwaProvider.tsx
@@ -11,10 +11,10 @@ export function PwaProvider({ children }: Props): ReactElement {
   const { needRefresh, offlineReady, handleOfflineClose, handleRefresh } = usePwaProvider();
 
   return (
-    <div className="z-20">
+    <>
       <PwaUpdateDialog open={needRefresh} onUpdate={handleRefresh} />
       <PwaOfflineDialog open={offlineReady} onClose={handleOfflineClose} />
       {children}
-    </div>
+    </>
   );
 }
diff --git a/src/components/library/pwa/offline-dialog/PwaOfflineDialog.tsx b/src/components/library/pwa/offline-dialog/PwaOfflineDialog.tsx
@@ -10,7 +10,7 @@ export function PwaOfflineDialog({ open, onClose }: PwaOfflineDialogProps): Reac
   return (
     <>
       {open && (
-        <div className="toast">
+        <div className="toast z-20">
           <div className="alert alert-info shadow-lg">
             <span>Ready to work offline</span>
             <button className="btn btn-square btn-ghost btn-sm" onClick={onClose}>

diff --git a/src/components/library/pwa/update-dialog/PwaUpdateDialog.tsx b/src/components/library/pwa/update-dialog/PwaUpdateDialog.tsx
@@ -9,7 +9,7 @@ export function PwaUpdateDialog({ open, onUpdate }: PwaUpdateDialogProps): React
   return (
     <>
       {open && (
-        <div className="toast toast-center toast-bottom">
+        <div className="toast toast-center toast-bottom z-20">
           <div className="alert alert-info shadow-lg">
             <div className="flex flex-1 flex-row items-center gap-4">
               <span>A new version is available</span>

diff --git a/src/core/App.tsx b/src/core/App.tsx
@@ -7,10 +7,10 @@ export function App(): ReactElement {
   useDocumentTitle("Pixi Image Editor");
 
   return (
-    <AppProviders>
-      <div className="flex h-svh w-svw">
+    <div className="flex h-svh w-svw">
+      <AppProviders>
         <AppRoutes />
-      </div>
-    </AppProviders>
+      </AppProviders>
+    </div>
   );
 }