💄(frontend) add consistent spacing to picture-in-picture tiles

Add padding to StageFrame and bigger gaps so PiP tiles aren't flush with window.

src/frontend/src/features/pip/components/layout/PipFocusLayout.tsx

@@ -26,6 +26,7 @@ export const PipFocusLayout = memo(
             <ParticipantTile
               key={getTrackKey(mainTrack)}
               trackRef={mainTrack}
+              disableTileControls
             />
           </MainSlot>
         )}
@@ -34,6 +35,7 @@ export const PipFocusLayout = memo(
             <ParticipantTile
               key={getTrackKey(thumbnailTrack)}
               trackRef={thumbnailTrack}
+              disableTileControls
             />
           </Thumbnail>
         )}
@@ -48,9 +50,10 @@ const FocusContainer = styled('div', {
     position: 'relative',
     width: '100%',
     height: '100%',
-    borderRadius: '4px',
+    borderRadius: '8px',
     overflow: 'hidden',
     backgroundColor: 'primaryDark.100',
+    boxSizing: 'border-box',
   },
 })
 
@@ -58,6 +61,8 @@ const MainSlot = styled('div', {
   base: {
     width: '100%',
     height: '100%',
+    borderRadius: '8px',
+    overflow: 'hidden',
     '& .lk-participant-media-video': {
       objectFit: 'contain',
     },
@@ -67,13 +72,13 @@ const MainSlot = styled('div', {
 const Thumbnail = styled('div', {
   base: {
     position: 'absolute',
-    right: '1rem',
+    right: '1.25rem',
-    bottom: '1rem',
+    bottom: '1.25rem',
     width: '42%',
     maxWidth: '220px',
     minWidth: '140px',
     aspectRatio: '16 / 9',
-    borderRadius: '4px',
+    borderRadius: '8px',
     overflow: 'hidden',
     boxShadow: 'md',
     zIndex: 2,

src/frontend/src/features/pip/components/layout/PipGridLayout.tsx

@@ -41,7 +41,7 @@ export const PipGridLayout = memo(({ tracks }: PipGridLayoutProps) => {
     <GridContainer ref={containerRef} style={gridStyle}>
       {tracks.map((track, index) => (
         <GridCell key={getTrackKey(track)} style={placements[index]}>
-          <ParticipantTile trackRef={track} />
+          <ParticipantTile trackRef={track} disableTileControls />
         </GridCell>
       ))}
     </GridContainer>
@@ -54,7 +54,8 @@ const GridContainer = styled('div', {
     width: '100%',
     height: '100%',
     display: 'grid',
-    gap: '0.25rem',
+    gap: '0.5rem',
+    boxSizing: 'border-box',
   },
 })
 
@@ -63,7 +64,7 @@ const GridCell = styled('div', {
     position: 'relative',
     minWidth: 0,
     minHeight: 0,
-    borderRadius: '4px',
+    borderRadius: '8px',
     overflow: 'hidden',
     backgroundColor: 'primaryDark.100',
     // Paint on own layer so FLIP transforms don't trigger layout thrash.

src/frontend/src/features/pip/components/layout/PipScreenShareLayout.tsx

@@ -22,13 +22,13 @@ export const PipScreenShareLayout = memo(
           <CameraTilesRow>
             {cameraTracks.map((track) => (
               <CameraTile key={getTrackKey(track)}>
-                <ParticipantTile trackRef={track} />
+                <ParticipantTile trackRef={track} disableTileControls />
               </CameraTile>
             ))}
           </CameraTilesRow>
         )}
         <ScreenShareSlot>
-          <ParticipantTile trackRef={screenShareTrack} />
+          <ParticipantTile trackRef={screenShareTrack} disableTileControls />
         </ScreenShareSlot>
       </LayoutContainer>
     )
@@ -42,7 +42,8 @@ const LayoutContainer = styled('div', {
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
-    gap: '0.25rem',
+    gap: '0.5rem',
+    boxSizing: 'border-box',
     overflow: 'hidden',
   },
 })
@@ -51,7 +52,8 @@ const CameraTilesRow = styled('div', {
   base: {
     display: 'flex',
     flexDirection: 'row',
-    gap: '0.25rem',
+    justifyContent: 'center',
+    gap: '0.5rem',
     flexShrink: 0,
     height: '22%',
     minHeight: '60px',
@@ -62,9 +64,11 @@ const CameraTilesRow = styled('div', {
 const CameraTile = styled('div', {
   base: {
     position: 'relative',
-    flex: '1 1 0',
+    flex: '0 1 auto',
+    height: '100%',
+    aspectRatio: '16 / 9',
     minWidth: 0,
-    borderRadius: '4px',
+    borderRadius: '8px',
     overflow: 'hidden',
     backgroundColor: 'primaryDark.100',
     '& .lk-participant-tile': {
@@ -79,7 +83,7 @@ const ScreenShareSlot = styled('div', {
     position: 'relative',
     flex: 1,
     minHeight: 0,
-    borderRadius: '4px',
+    borderRadius: '8px',
     overflow: 'hidden',
     backgroundColor: 'primaryDark.100',
     '& .lk-participant-tile': {

src/frontend/src/features/pip/components/layout/StageFrame.tsx

@@ -25,8 +25,8 @@ const Container = styled('div', {
     flex: 1,
     minWidth: 0,
     minHeight: 0,
-    marginLeft: '0.5rem',
+    padding: '0.5rem',
-    marginRight: '0.5rem',
+    boxSizing: 'border-box',
     borderRadius: '4px',
     overflow: 'hidden',
   },

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

@@ -52,6 +52,7 @@ export function TrackRefContextIfNeeded(
 
 interface ParticipantTileExtendedProps extends ParticipantTileProps {
   disableMetadata?: boolean
+  disableTileControls?: boolean
 }
 
 export const ParticipantTile: (
@@ -66,6 +67,7 @@ export const ParticipantTile: (
     onParticipantClick,
     disableSpeakingIndicator,
     disableMetadata,
+    disableTileControls,
     ...htmlProps
   }: ParticipantTileExtendedProps,
   ref
@@ -231,7 +233,7 @@ export const ParticipantTile: (
               )}
             </>
           )}
-          {!disableMetadata && (
+          {!disableMetadata && !disableTileControls && (
             <ParticipantTileFocus
               trackRef={trackReference}
               hasKeyboardFocus={hasKeyboardFocus}