Create a proper one-on-one call layout for portrait screens

src/grid/CallLayout.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type BehaviorSubject, type Observable } from "rxjs";
+import { type Observable } from "rxjs";
 import { type ComponentType } from "react";
 
 import { type LayoutProps } from "./Grid";
@@ -16,37 +16,18 @@ export interface Bounds {
   height: number;
 }
 
-export interface Alignment {
-  inline: "start" | "end";
-  block: "start" | "end";
-}
-
-export const defaultSpotlightAlignment: Alignment = {
-  inline: "end",
-  block: "end",
-};
-export const defaultPipAlignment: Alignment = { inline: "end", block: "start" };
-
 export interface CallLayoutInputs {
   /**
    * The minimum bounds of the layout area.
    */
   minBounds$: Observable<Bounds>;
-  /**
-   * The alignment of the floating spotlight tile, if present.
-   */
-  spotlightAlignment$: BehaviorSubject<Alignment>;
-  /**
-   * The alignment of the small picture-in-picture tile, if present.
-   */
-  pipAlignment$: BehaviorSubject<Alignment>;
 }
 
 export interface CallLayoutOutputs<Model> {
   /**
-   * Whether the scrolling layer of the layout should appear on top.
+   * Which layer should appear in the foreground.
    */
-  scrollingOnTop: boolean;
+  foreground: "fixed" | "scrolling";
   /**
    * The visually fixed (non-scrolling) layer of the layout.
    */