Merge pull request #171 from cloudflare/more-layout-tweaks

More small layout improvements
cloudflare · Feb 14, 2025 · ab18dbc · ab18dbc
2 parents fa0961e + 2425e6b
commit ab18dbc
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/app/components/Participant.tsx b/app/components/Participant.tsx
@@ -182,6 +182,7 @@ export const Participant = forwardRef<
 						className={cn(
 							'absolute inset-0 h-full w-full object-contain opacity-0 transition-opacity',
 							isSelf && !isScreenShare && '-scale-x-100',
+							!isScreenShare && 'object-cover',
 							{
 								'opacity-100': isScreenShare
 									? user.tracks.screenShareEnabled
@@ -244,7 +245,7 @@ export const Participant = forwardRef<
 						<div className="flex items-center gap-2 absolute m-2 text-shadow left-1 bottom-1">
 							<ConnectionIndicator quality={getConnectionQuality(packetLoss)} />
 							<OptionalLink
-								className="leading-none"
+								className="leading-none text-sm"
 								href={populateTraceLink(user.transceiverSessionId, traceLink)}
 								target="_blank"
 								rel="noopener noreferrer"

diff --git a/app/components/ParticipantLayout.tsx b/app/components/ParticipantLayout.tsx
@@ -8,9 +8,11 @@ import { Participant } from './Participant'
 export function ParticipantLayout({
 	users,
 	gap,
+	aspectRatio,
 }: {
 	users: User[]
 	gap: number
+	aspectRatio: string
 }) {
 	const $el = useRef<HTMLDivElement>(null)
 
@@ -21,7 +23,7 @@ export function ParticipantLayout({
 	const { width, height, getPosition } = createGrid({
 		dimensions,
 		count: users.length,
-		aspectRatio: '4:3',
+		aspectRatio,
 		gap,
 	})
 

diff --git a/app/routes/_room.$roomName.room.tsx b/app/routes/_room.$roomName.room.tsx
@@ -152,13 +152,15 @@ function JoinedRoom({ bugReportsEnabled }: { bugReportsEnabled: boolean }) {
 								<ParticipantLayout
 									users={pinnedActors.filter(isNonNullable)}
 									gap={gridGap}
+									aspectRatio="16:9"
 								/>
 							</div>
 						)}
 						<div className="flex-grow overflow-hidden relative">
 							<ParticipantLayout
 								users={unpinnedActors.filter(isNonNullable)}
 								gap={gridGap}
+								aspectRatio="4:3"
 							/>
 						</div>
 					</div>