From 73eb2202ccd3f89bc8600f3c4a51c9de54a2bd36 Mon Sep 17 00:00:00 2001
From: Ivan <45982459+ivntsng@users.noreply.github.com>
Date: Mon, 4 Nov 2024 05:43:21 +0900
Subject: [PATCH] Resoled issue where notifications would show up behind price
 bar (#523)

---
 frontend/src/components/products/ProductPage.tsx | 2 +-
 frontend/src/hooks/useAlertQueue.tsx             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/products/ProductPage.tsx b/frontend/src/components/products/ProductPage.tsx
index 62f384e7..01a9474c 100644
--- a/frontend/src/components/products/ProductPage.tsx
+++ b/frontend/src/components/products/ProductPage.tsx
@@ -1065,7 +1065,7 @@ const ProductPage: React.FC<ProductPageProps> = ({
           </div>
 
           {shouldShowCheckout && isFixed && (
-            <div className="fixed bottom-0 left-0 right-0 bg-white shadow-md p-4 transition-all duration-300 ease-in-out z-10">
+            <div className="fixed bottom-0 left-0 right-0 bg-white shadow-md p-4 transition-all duration-300 ease-in-out z-[5]">
               <div className="max-w-7xl mx-auto flex justify-between items-center px-6">
                 <p className="text-2xl font-semibold">
                   {formatPrice(currentPrice)}
diff --git a/frontend/src/hooks/useAlertQueue.tsx b/frontend/src/hooks/useAlertQueue.tsx
index b4d5875d..1f5cb8e3 100644
--- a/frontend/src/hooks/useAlertQueue.tsx
+++ b/frontend/src/hooks/useAlertQueue.tsx
@@ -123,7 +123,7 @@ export const AlertQueue = (props: AlertQueueProps) => {
     <>
       {children}
       {/* Render the alerts coming up from the bottom-left corner. */}
-      <div className="fixed bottom-0 left-0 p-4 space-y-4">
+      <div className="fixed bottom-0 left-0 p-4 space-y-4 z-[9999]">
         {Array.from(alerts).map(([alertId, [alert, kind]]) => {
           return (
             <Toast