diff --git a/src/frontend/src/features/pip/components/layout/PipFocusLayout.tsx b/src/frontend/src/features/pip/components/layout/PipFocusLayout.tsx
deleted file mode 100644
index ff5d493f..00000000
--- a/src/frontend/src/features/pip/components/layout/PipFocusLayout.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { memo } from 'react'
-import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
-import { styled } from '@/styled-system/jsx'
-import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
-import { getTrackKey } from '../../utils/pipTrackSelection'
-
-type PipFocusLayoutProps = {
- mainTrack?: TrackReferenceOrPlaceholder
- thumbnailTrack?: TrackReferenceOrPlaceholder
-}
-
-/**
- * Focus layout used when 1-2 tracks are visible in the PiP window.
- *
- * The main tile is letterboxed (object-fit: contain) so the camera is
- * never stretched to a non-video aspect and leaves dark padding
- * above/below when the window shape doesn't match the source.
- * The thumbnail keeps the usual cover fill.
- */
-export const PipFocusLayout = memo(
- ({ mainTrack, thumbnailTrack }: PipFocusLayoutProps) => {
- return (
-
- {mainTrack && (
-
-
-
- )}
- {thumbnailTrack && (
-
-
-
- )}
-
- )
- }
-)
-PipFocusLayout.displayName = 'PipFocusLayout'
-
-const FocusContainer = styled('div', {
- base: {
- position: 'relative',
- width: '100%',
- height: '100%',
- borderRadius: '8px',
- overflow: 'hidden',
- backgroundColor: 'primaryDark.100',
- boxSizing: 'border-box',
- },
-})
-
-const MainSlot = styled('div', {
- base: {
- width: '100%',
- height: '100%',
- borderRadius: '8px',
- overflow: 'hidden',
- '& .lk-participant-media-video': {
- objectFit: 'contain',
- },
- },
-})
-
-const Thumbnail = styled('div', {
- base: {
- position: 'absolute',
- right: '1.25rem',
- bottom: '1.25rem',
- width: '42%',
- maxWidth: '220px',
- minWidth: '140px',
- aspectRatio: '16 / 9',
- borderRadius: '8px',
- overflow: 'hidden',
- boxShadow: 'md',
- zIndex: 2,
- },
-})
diff --git a/src/frontend/src/features/pip/components/layout/PipStage.tsx b/src/frontend/src/features/pip/components/layout/PipStage.tsx
index 1102c453..91b249cf 100644
--- a/src/frontend/src/features/pip/components/layout/PipStage.tsx
+++ b/src/frontend/src/features/pip/components/layout/PipStage.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react'
import { usePagination, useTracks } from '@livekit/components-react'
import { RoomEvent, Track } from 'livekit-client'
import { styled } from '@/styled-system/jsx'
-import { PipFocusLayout } from './PipFocusLayout'
+import { OneToOneFocusLayout } from '@/features/layout/components/OneToOneFocusLayout'
import { PipGridLayout } from './PipGridLayout'
import { PipPagination } from './PipPagination'
import { PipScreenShareLayout } from './PipScreenShareLayout'
@@ -59,9 +59,11 @@ export const PipStage = () => {
if (cameraTracks.length <= 1) {
return (
-
)
@@ -99,7 +101,12 @@ export const PipStage = () => {
return (
-
+
)
}