From 37a3d6e7edb4a04664dd02ba22c5f3da03baaa79 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Thu, 7 May 2026 12:10:34 +0200
Subject: [PATCH] =?UTF-8?q?fixup!=20=E2=99=BB=EF=B8=8F(frontend)=20harden?=
 =?UTF-8?q?=20PiP=20notifications=20stacking=20and=20dedupe?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../notifications/PipNotificationOverlay.tsx  | 27 +++++--------------
 1 file changed, 7 insertions(+), 20 deletions(-)

diff --git a/src/frontend/src/features/pip/components/notifications/PipNotificationOverlay.tsx b/src/frontend/src/features/pip/components/notifications/PipNotificationOverlay.tsx
index 90671b89..04420442 100644
--- a/src/frontend/src/features/pip/components/notifications/PipNotificationOverlay.tsx
+++ b/src/frontend/src/features/pip/components/notifications/PipNotificationOverlay.tsx
@@ -7,6 +7,7 @@ import {
   toastQueue,
   type ToastData,
 } from '@/features/notifications/components/ToastProvider'
+import { StyledToastContainer } from '@/features/notifications/components/Toast'
 import { PipToastBody } from './PipToastBody'
 
 /**
@@ -32,7 +33,11 @@ export const PipNotificationOverlay = () => {
       aria-live="polite"
     >
       {toasts.map((toast) => (
-        <ToastCard key={toast.key} aria-atomic="true">
+        <StyledToastContainer
+          key={toast.key}
+          aria-atomic="true"
+          css={{ margin: 0, marginLeft: 0, display: 'flex', alignItems: 'center', paddingRight: '0.25rem' }}
+        >
           <PipToastBody toast={toast} />
           <Button
             square
@@ -43,7 +48,7 @@ export const PipNotificationOverlay = () => {
           >
             <RiCloseLine size={16} color="white" aria-hidden="true" />
           </Button>
-        </ToastCard>
+        </StyledToastContainer>
       ))}
     </Region>
   )
@@ -59,21 +64,3 @@ const Region = styled('div', {
   },
 })
 
-const ToastCard = styled('div', {
-  base: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.25rem',
-    maxWidth: '100%',
-    backgroundColor: 'greyscale.700',
-    color: 'white',
-    borderRadius: '6px',
-    boxShadow:
-      'rgba(0, 0, 0, 0.4) 0px 2px 6px 0px, rgba(0, 0, 0, 0.25) 0px 4px 12px 2px',
-    paddingRight: '0.25rem',
-    animation: 'fade 200ms',
-    '@media (prefers-reduced-motion: reduce)': {
-      animation: 'none',
-    },
-  },
-})