♻️(frontend) delegate scroll to side panel content

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/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}

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>
 )
 

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>
   )
 }