From 356797d32671c9bc47775e7a2584a351968e042d Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 6 Mar 2025 00:04:20 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20resolve=20conflicting?=
 =?UTF-8?q?=20styles=20in=20SidePanel=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix regression caused by competing styling methods in Box component. Remove
duplicate position properties and standardize on simple div with css-in-js
approach to prevent style conflicts and unexpected layout behavior.
---
 .../rooms/livekit/components/SidePanel.tsx       | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
index deb7a9b9..f67d27a7 100644
--- a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
@@ -2,7 +2,7 @@ import { layoutStore } from '@/stores/layout'
 import { css } from '@/styled-system/css'
 import { Heading } from 'react-aria-components'
 import { text } from '@/primitives/Text'
-import { Box, Button, Div } from '@/primitives'
+import { Button, Div } from '@/primitives'
 import { RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { ParticipantsList } from './controls/Participants/ParticipantsList'
@@ -28,9 +28,16 @@ const StyledSidePanel = ({
   isClosed,
   closeButtonTooltip,
 }: StyledSidePanelProps) => (
-  <Box
-    size="sm"
+  <div
     className={css({
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'box.border',
+      backgroundColor: 'box.bg',
+      color: 'box.text',
+      borderRadius: 8,
+      flex: 1,
+      position: 'absolute',
       overflow: 'hidden',
       display: 'flex',
       flexDirection: 'column',
@@ -41,7 +48,6 @@ const StyledSidePanel = ({
       top: 0,
       bottom: '80px',
       width: '360px',
-      position: 'absolute',
       transition: '.5s cubic-bezier(.4,0,.2,1) 5ms',
     })}
     style={{
@@ -80,7 +86,7 @@ const StyledSidePanel = ({
       </Button>
     </Div>
     {children}
-  </Box>
+  </div>
 )
 
 type PanelProps = {