From 68f0ea36394e4a2981a077549745931ee57bdb14 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 9 Aug 2024 22:08:02 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20prevent=20controls=20s?=
 =?UTF-8?q?hift=20when=20opening=20chat?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In LiveKit, opening the chat causes the entire page layout, including
participant tiles and controls, to shift left. This disrupts the user
experience, as the chat toggle button moves, requiring users to reposition
their cursor to close the chat.

This behavior also prevents effective organization of the control bar,
especially when trying to maintain a centered section for main controls and
a fixed section for quick-access buttons on the left or right bottom corners.

This fix temporarily locks the controls and participant list in place when
the chat is toggled. The styles will be refactored during the upcoming
redesign.
---
 .../rooms/livekit/prefabs/VideoConference.tsx | 61 ++++++++++++-------
 1 file changed, 40 insertions(+), 21 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
index 1b4660e1..907fd4b4 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
@@ -30,6 +30,20 @@ import {
 } from '@livekit/components-react'
 
 import { ControlBar } from './ControlBar'
+import { styled } from '@/styled-system/jsx'
+import { cva } from '@/styled-system/css'
+
+const LayoutWrapper = styled(
+  'div',
+  cva({
+    base: {
+      position: 'relative',
+      display: 'flex',
+      width: '100%',
+      height: 'calc(100% - var(--lk-control-bar-height))',
+    },
+  })
+)
 
 /**
  * @public
@@ -163,30 +177,35 @@ export function VideoConference({
           onWidgetChange={widgetUpdate}
         >
           <div className="lk-video-conference-inner">
-            {!focusTrack ? (
-              <div className="lk-grid-layout-wrapper">
-                <GridLayout tracks={tracks}>
-                  <ParticipantTile />
-                </GridLayout>
-              </div>
-            ) : (
-              <div className="lk-focus-layout-wrapper">
-                <FocusLayoutContainer>
-                  <CarouselLayout tracks={carouselTracks}>
+            <LayoutWrapper>
+              {!focusTrack ? (
+                <div
+                  className="lk-grid-layout-wrapper"
+                  style={{ height: 'auto' }}
+                >
+                  <GridLayout tracks={tracks}>
                     <ParticipantTile />
-                  </CarouselLayout>
-                  {focusTrack && <FocusLayout trackRef={focusTrack} />}
-                </FocusLayoutContainer>
-              </div>
-            )}
+                  </GridLayout>
+                </div>
+              ) : (
+                <div className="lk-focus-layout-wrapper">
+                  <FocusLayoutContainer>
+                    <CarouselLayout tracks={carouselTracks}>
+                      <ParticipantTile />
+                    </CarouselLayout>
+                    {focusTrack && <FocusLayout trackRef={focusTrack} />}
+                  </FocusLayoutContainer>
+                </div>
+              )}
+              <Chat
+                style={{ display: widgetState.showChat ? 'grid' : 'none' }}
+                messageFormatter={chatMessageFormatter}
+                messageEncoder={chatMessageEncoder}
+                messageDecoder={chatMessageDecoder}
+              />
+            </LayoutWrapper>
             <ControlBar />
           </div>
-          <Chat
-            style={{ display: widgetState.showChat ? 'grid' : 'none' }}
-            messageFormatter={chatMessageFormatter}
-            messageEncoder={chatMessageEncoder}
-            messageDecoder={chatMessageDecoder}
-          />
         </LayoutContextProvider>
       )}
       <RoomAudioRenderer />