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 && (