From 0370d9cad00512a8fe46d50753bb8a6cba5552a4 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 9 Oct 2024 17:28:41 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20delegate=20scrol?=
 =?UTF-8?q?l=20to=20side=20panel=20content?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Allow more flexibility in side panel behavior. Some panels, such as the chat,
require specific scrolling functionality:
- Header and footer should remain fixed
- Only chat messages should be scrollable

This change enables customization of scroll behavior for different panel types,
improving component reusability.
---
 .../src/features/rooms/livekit/components/Effects.tsx         | 2 +-
 .../src/features/rooms/livekit/components/SidePanel.tsx       | 2 +-
 .../components/controls/Participants/ParticipantsList.tsx     | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/Effects.tsx b/src/frontend/src/features/rooms/livekit/components/Effects.tsx
index b1b933d1..f5857df5 100644
--- a/src/frontend/src/features/rooms/livekit/components/Effects.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/Effects.tsx
@@ -94,7 +94,7 @@ export const Effects = () => {
   }
 
   return (
-    <VStack padding="0 1.5rem">
+    <VStack padding="0 1.5rem" overflowY="scroll">
       {localCameraTrack && isCameraEnabled ? (
         <video
           ref={videoRef}
diff --git a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
index 7967141b..5443a85b 100644
--- a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
@@ -58,7 +58,7 @@ const StyledSidePanel = ({
         <RiCloseLine />
       </Button>
     </Div>
-    <Div overflowY="scroll">{children}</Div>
+    {children}
   </Box>
 )
 
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
index 63207799..4c74c22e 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
@@ -44,7 +44,7 @@ export const ParticipantsList = () => {
 
   // TODO - extract inline styling in a centralized styling file, and avoid magic numbers
   return (
-    <>
+    <Div overflowY="scroll">
       <H
         lvl={2}
         className={css({
@@ -78,6 +78,6 @@ export const ParticipantsList = () => {
           <ParticipantListItem participant={participant} />
         )}
       />
-    </>
+    </Div>
   )
 }