diff --git a/src/frontend/src/features/pip/components/layout/PipFocusLayout.tsx b/src/frontend/src/features/pip/components/layout/PipFocusLayout.tsx index e09b5ef0..ff5d493f 100644 --- a/src/frontend/src/features/pip/components/layout/PipFocusLayout.tsx +++ b/src/frontend/src/features/pip/components/layout/PipFocusLayout.tsx @@ -26,6 +26,7 @@ export const PipFocusLayout = memo( )} @@ -34,6 +35,7 @@ export const PipFocusLayout = memo( )} @@ -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', - bottom: '1rem', + right: '1.25rem', + bottom: '1.25rem', width: '42%', maxWidth: '220px', minWidth: '140px', aspectRatio: '16 / 9', - borderRadius: '4px', + borderRadius: '8px', overflow: 'hidden', boxShadow: 'md', zIndex: 2, diff --git a/src/frontend/src/features/pip/components/layout/PipGridLayout.tsx b/src/frontend/src/features/pip/components/layout/PipGridLayout.tsx index 5221ef85..4b4afacb 100644 --- a/src/frontend/src/features/pip/components/layout/PipGridLayout.tsx +++ b/src/frontend/src/features/pip/components/layout/PipGridLayout.tsx @@ -41,7 +41,7 @@ export const PipGridLayout = memo(({ tracks }: PipGridLayoutProps) => { {tracks.map((track, index) => ( - + ))} @@ -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. diff --git a/src/frontend/src/features/pip/components/layout/PipScreenShareLayout.tsx b/src/frontend/src/features/pip/components/layout/PipScreenShareLayout.tsx index 7328b9ea..b78dbcc0 100644 --- a/src/frontend/src/features/pip/components/layout/PipScreenShareLayout.tsx +++ b/src/frontend/src/features/pip/components/layout/PipScreenShareLayout.tsx @@ -22,13 +22,13 @@ export const PipScreenShareLayout = memo( {cameraTracks.map((track) => ( - + ))} )} - + ) @@ -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': { diff --git a/src/frontend/src/features/pip/components/layout/StageFrame.tsx b/src/frontend/src/features/pip/components/layout/StageFrame.tsx index 93edd049..7d8666f1 100644 --- a/src/frontend/src/features/pip/components/layout/StageFrame.tsx +++ b/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', - marginRight: '0.5rem', + padding: '0.5rem', + boxSizing: 'border-box', borderRadius: '4px', overflow: 'hidden', }, diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx index 629e9980..e1405d2a 100644 --- a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx +++ b/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 && (