feat(ui): refine live observation workspace

apps/control-station/test/observationSources.test.mjs

@@ -10,6 +10,7 @@ let openObservationSource;
 let shouldRestartObservationSource;
 let consumeCameraLeaseRetry;
 let resetCameraLeaseRetryBudget;
+let initialObservationWindowRect;
 
 before(async () => {
   server = await createServer({
@@ -29,6 +30,49 @@ before(async () => {
   ({ consumeCameraLeaseRetry, resetCameraLeaseRetryBudget } = await server.ssrLoadModule(
     "/src/components/MseFmp4WebSocketPlayer.tsx",
   ));
+  ({ initialObservationWindowRect } = await server.ssrLoadModule(
+    "/src/components/FloatingObservationWindow.tsx",
+  ));
+});
+
+test("observation camera windows tile from the bottom-right above the live timeline", () => {
+  const bounds = { width: 1280, height: 720 };
+  const left = initialObservationWindowRect(0, 2, bounds);
+  const right = initialObservationWindowRect(1, 2, bounds);
+
+  assert.equal(left.y, right.y);
+  assert.ok(left.x + left.width < right.x);
+  assert.equal(right.x + right.width, bounds.width - 18);
+  assert.ok(right.y + right.height <= bounds.height - 64);
+});
+
+test("observation camera windows stack without overlap when the viewport is narrow", () => {
+  const bounds = { width: 420, height: 700 };
+  const lower = initialObservationWindowRect(0, 2, bounds);
+  const upper = initialObservationWindowRect(1, 2, bounds);
+
+  assert.equal(lower.x, upper.x);
+  assert.ok(upper.y + upper.height < lower.y);
+  for (const rect of [lower, upper]) {
+    assert.ok(rect.x >= 0 && rect.y >= 0);
+    assert.ok(rect.x + rect.width <= bounds.width);
+    assert.ok(rect.y + rect.height <= bounds.height - 64);
+  }
+});
+
+test("observation camera tiling remains in bounds on a constrained viewport", () => {
+  const bounds = { width: 260, height: 280 };
+  const rects = Array.from({ length: 2 }, (_, index) => (
+    initialObservationWindowRect(index, 2, bounds)
+  ));
+
+  for (const rect of rects) {
+    assert.ok(rect.width > 0 && rect.height > 0);
+    assert.ok(rect.x >= 0 && rect.y >= 0);
+    assert.ok(rect.x + rect.width <= bounds.width);
+    assert.ok(rect.y + rect.height <= bounds.height - 64);
+  }
+  assert.ok(rects[1].y + rects[1].height <= rects[0].y);
 });
 
 after(async () => {