♻️(frontend) extract layout constants for alignment

Move hardcoded values used for layout alignment and animations
between the videoconference and side panel into shared constants.

This improves readability and makes future adjustments easier to
maintain.

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))`,
         },
       },
     },
@@ -63,7 +62,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) => {