Add PiP border in 1on1 layouts

Fixes: #4008

src/tile/GridTile.module.css

@@ -66,6 +66,11 @@ borders don't support gradients */
   opacity: 1;
 }
 
+.tile.outline {
+  outline: var(--cpd-border-width-1) solid
+    var(--cpd-color-border-interactive-secondary);
+}
+
 @media (hover: hover) {
   .tile:hover {
     outline: var(--cpd-border-width-2) solid

src/tile/GridTile.test.tsx

@@ -78,6 +78,7 @@ test("GridTile is accessible", async () => {
         showSpeakingIndicators
         showNameTags
         showRingingStatus
+        showOutline
         focusable
       />
     </ReactionsSenderProvider>,
@@ -110,6 +111,7 @@ test("GridTile displays ringing media", async () => {
         showSpeakingIndicators
         showNameTags
         showRingingStatus
+        showOutline
         focusable
       />
     </ReactionsSenderProvider>,

src/tile/GridTile.tsx

@@ -398,6 +398,7 @@ interface GridTileProps {
   showSpeakingIndicators: boolean;
   showNameTags: boolean;
   showRingingStatus: boolean;
+  showOutline: boolean;
   focusable: boolean;
 }
 
@@ -406,7 +407,9 @@ export const GridTile: FC<GridTileProps> = ({
   vm,
   showSpeakingIndicators,
   showRingingStatus,
+  showOutline,
   onOpenProfile,
+  className,
   ...props
 }) => {
   const ourRef = useRef<HTMLDivElement | null>(null);
@@ -423,6 +426,7 @@ export const GridTile: FC<GridTileProps> = ({
         displayName={displayName}
         mxcAvatarUrl={mxcAvatarUrl}
         showStatus={showRingingStatus}
+        className={classNames(className, { [styles.outline]: showOutline })}
         {...props}
       />
     );
@@ -435,6 +439,7 @@ export const GridTile: FC<GridTileProps> = ({
         onOpenProfile={onOpenProfile}
         displayName={displayName}
         mxcAvatarUrl={mxcAvatarUrl}
+        className={classNames(className, { [styles.outline]: showOutline })}
         {...props}
       />
     );
@@ -446,6 +451,7 @@ export const GridTile: FC<GridTileProps> = ({
         showSpeakingIndicators={showSpeakingIndicators}
         displayName={displayName}
         mxcAvatarUrl={mxcAvatarUrl}
+        className={classNames(className, { [styles.outline]: showOutline })}
         {...props}
       />
     );