From db51ca1aa5bca0d55365bc08844899e99559b564 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 31 Jan 2025 12:40:01 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20fix=20border=20radius?=
 =?UTF-8?q?=20issue=20on=20safari?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I introduced a bug while moving the border radius css style to the
parent element of the video.

On safari, the video element wasn't rounded anymore.

Fix this! Please note our approach should be refactored, nit-picking,
but there are few pixels leaking from the black background on the
video corner.
---
 src/frontend/src/features/rooms/components/Join.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/features/rooms/components/Join.tsx b/src/frontend/src/features/rooms/components/Join.tsx
index ecbc4b63..4a942545 100644
--- a/src/frontend/src/features/rooms/components/Join.tsx
+++ b/src/frontend/src/features/rooms/components/Join.tsx
@@ -82,7 +82,8 @@ const Effects = ({
           bottom: 0,
           height: '20%',
           backgroundImage:
-            'linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(255,255,255,0) 100%)',
+            'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 100%)',
+          borderBottomRadius: '1rem',
         })}
       />
     </>
@@ -267,12 +268,13 @@ export const Join = ({
                   height="720"
                   className={css({
                     display: 'block',
-                    width: '102%',
-                    height: '102%',
+                    width: '100%',
+                    height: '100%',
                     objectFit: 'cover',
                     transform: 'rotateY(180deg)',
                     opacity: 0,
                     transition: 'opacity 0.3s ease-in-out',
+                    borderRadius: '1rem',
                   })}
                   disablePictureInPicture
                   disableRemotePlayback