wip factorize magic layout value

src/frontend/panda.config.ts

@@ -274,6 +274,10 @@ const config: Config = {
         min: { value: 'min-content' },
         max: { value: 'max-content' },
         fit: { value: 'fit-content' },
+        // room layout
+        'room-side-panel': { value: '360px' },
+        'room-side-panel-margin': { value: '1.5rem' },
+        'room-control-bar': { value: '80px' },
       },
       spacing,
     }),

src/frontend/src/features/layout/components/RoomContentArea.tsx

@@ -5,9 +5,8 @@ import { styled } from '@/styled-system/jsx'
 import { cva } from '@/styled-system/css'
 import { useSubtitles } from '@/features/subtitle/hooks/useSubtitles'
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
-import {Subtitles} from "@/features/subtitle/component/Subtitles";
-import {MainNotificationToast} from "@/features/notifications/MainNotificationToast";
-
+import { Subtitles } from '@/features/subtitle/component/Subtitles'
+import { MainNotificationToast } from '@/features/notifications/MainNotificationToast'
 
 const RoomViewport = styled(
   'div',
@@ -20,10 +19,10 @@ const RoomViewport = styled(
     variants: {
       isSidePanelOpen: {
         true: {
-          inset: `var(--lk-grid-gap) calc(358px + 3rem) calc(80px + var(--lk-grid-gap)) 16px`,
+          inset: `var(--lk-grid-gap) calc(var(--sizes-room-side-panel) + var(--sizes-room-side-panel-margin) * 2) calc(var(--sizes-room-control-bar) + var(--lk-grid-gap)) 16px`,
         },
         false: {
-          inset: `var(--lk-grid-gap) var(--lk-grid-gap) calc(80px + var(--lk-grid-gap))`,
+          inset: `var(--lk-grid-gap) var(--lk-grid-gap) calc(var(--sizes-room-control-bar) + var(--lk-grid-gap))`,
         },
       },
     },
@@ -64,7 +63,7 @@ export function RoomContentArea({ children }: RoomContentAreaProps) {
   return (
     <RoomViewport isSidePanelOpen={isSidePanelOpen}>
       <TrackAreaContainer areSubtitlesOpen={areSubtitlesOpen}>
-          {children}
+        {children}
       </TrackAreaContainer>
       <Subtitles />
       <MainNotificationToast />

src/frontend/src/features/rooms/livekit/components/SidePanel.tsx

@@ -51,17 +51,20 @@ const StyledSidePanel = ({
       overflow: 'hidden',
       display: 'flex',
       flexDirection: 'column',
-      margin: '1.5rem 1.5rem 1.5rem 0',
+      margin: 'var(--sizes-room-side-panel-margin)',
+      marginLeft: 0,
       padding: 0,
       gap: 0,
       right: 0,
       top: 0,
-      bottom: '80px',
-      width: '360px',
+      bottom: 'var(--sizes-room-control-bar)',
+      width: 'var(--sizes-room-side-panel)',
       transition: '.5s cubic-bezier(.4,0,.2,1) 5ms',
     })}
     style={{
-      transform: isClosed ? 'translateX(calc(360px + 1.5rem))' : 'none',
+      transform: isClosed
+        ? 'translateX(calc(var(--sizes-room-side-panel) + var(--sizes-room-side-panel-margin)))'
+        : 'none',
     }}
     aria-hidden={isClosed}
     aria-label={ariaLabel}

src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx

@@ -39,9 +39,7 @@ import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
 import { ReactionPortals } from '@/features/reactions/components/ReactionPortals'
 import { CarouselLayout } from '@/features/layout/components/CarouselLayout'
 import { GridLayout } from '@/features/layout/components/GridLayout'
-import {
-  RoomContentArea,
-} from '@/features/layout/components/RoomContentArea'
+import { RoomContentArea } from '@/features/layout/components/RoomContentArea'
 
 /**
  * @public
@@ -249,35 +247,34 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
             onClose={() => setIsShareErrorVisible(false)}
           />
           <IsIdleDisconnectModal />
-          <RoomContentArea
-          >
-              {!focusTrack ? (
-                <div
-                  className="lk-grid-layout-wrapper"
-                  style={{ height: 'auto' }}
-                >
-                  <GridLayout tracks={tracks} style={{ padding: 0 }}>
+          <RoomContentArea>
+            {!focusTrack ? (
+              <div
+                className="lk-grid-layout-wrapper"
+                style={{ height: 'auto' }}
+              >
+                <GridLayout tracks={tracks} style={{ padding: 0 }}>
+                  <ParticipantTile />
+                </GridLayout>
+              </div>
+            ) : (
+              <div
+                className="lk-focus-layout-wrapper"
+                style={{ height: 'auto' }}
+              >
+                <FocusLayoutContainer style={{ padding: 0 }}>
+                  <CarouselLayout
+                    tracks={carouselTracks}
+                    style={{
+                      minWidth: '200px',
+                    }}
+                  >
                     <ParticipantTile />
-                  </GridLayout>
-                </div>
-              ) : (
-                <div
-                  className="lk-focus-layout-wrapper"
-                  style={{ height: 'auto' }}
-                >
-                  <FocusLayoutContainer style={{ padding: 0 }}>
-                    <CarouselLayout
-                      tracks={carouselTracks}
-                      style={{
-                        minWidth: '200px',
-                      }}
-                    >
-                      <ParticipantTile />
-                    </CarouselLayout>
-                    {focusTrack && <FocusLayout trackRef={focusTrack} />}
-                  </FocusLayoutContainer>
-                </div>
-              )}
+                  </CarouselLayout>
+                  {focusTrack && <FocusLayout trackRef={focusTrack} />}
+                </FocusLayoutContainer>
+              </div>
+            )}
           </RoomContentArea>
           <ControlBar
             onDeviceError={(e) => {