Improve mobile viewport and menu layout

Author: DjDeveloperr

client/src/app/AppShell.tsx

@@ -141,6 +141,7 @@ const STREAM_TRANSPORT_VALUES = new Set<StreamTransport>([
   "h264",
   "webrtc",
 ]);
+const MOBILE_VIEWPORT_MEDIA_QUERY = "(max-width: 600px)";
 clearLegacyVolatileUiState();
 
 interface StreamQualityResponse {
@@ -240,6 +241,16 @@ function defaultStreamConfigForTransport(
   return base;
 }
 
+function shouldForceInitialFitMode(): boolean {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  return (
+    window.matchMedia?.(MOBILE_VIEWPORT_MEDIA_QUERY).matches ??
+    window.innerWidth <= 600
+  );
+}
+
 function writeStreamTransportQueryParam(transport: StreamTransport) {
   const url = new URL(window.location.href);
   if (transport === "auto") {
@@ -344,8 +355,11 @@ export function AppShell({
       readDeviceQueryParam() ??
       initialUiState.selectedUDID,
   );
+  const forceInitialFitMode = shouldForceInitialFitMode();
   const initialViewportState = initialSelectedUDID
-    ? viewportStateForUDID(initialUiState, initialSelectedUDID)
+    ? viewportStateForUDID(initialUiState, initialSelectedUDID, {
+        forceFit: forceInitialFitMode,
+      })
     : DEFAULT_VIEWPORT_STATE;
   const {
     error: listError,
@@ -975,6 +989,7 @@ export function AppShell({
     const nextViewportState = viewportStateForUDID(
       persistedState,
       selectedSimulator.udid,
+      { forceFit: shouldForceInitialFitMode() },
     );
     setStreamStamp(Date.now());
     setChromeProfile(null);

client/src/app/uiState.test.ts

@@ -104,6 +104,30 @@ describe("uiState", () => {
     expect(viewportStateForUDID({}, "missing")).toEqual(DEFAULT_VIEWPORT_STATE);
   });
 
+  it("can force a persisted viewport back to fit mode", () => {
+    expect(
+      viewportStateForUDID(
+        {
+          viewportByUDID: {
+            "sim-1": {
+              pan: { x: 20, y: 30 },
+              rotationQuarterTurns: 1,
+              viewMode: "manual",
+              zoom: 1.7,
+            },
+          },
+        },
+        "sim-1",
+        { forceFit: true },
+      ),
+    ).toEqual({
+      pan: DEFAULT_VIEWPORT_STATE.pan,
+      rotationQuarterTurns: 1,
+      viewMode: "fit",
+      zoom: null,
+    });
+  });
+
   it("uses the supplied stored-flag default outside the browser", () => {
     expect(readStoredFlag("missing-flag", true)).toBe(true);
   });

client/src/app/uiState.ts

@@ -182,8 +182,18 @@ export function writePersistedUiState(
 export function viewportStateForUDID(
   state: PersistedUiState,
   udid: string,
+  options: { forceFit?: boolean } = {},
 ): PersistedViewportState {
-  return state.viewportByUDID?.[udid] ?? DEFAULT_VIEWPORT_STATE;
+  const viewportState = state.viewportByUDID?.[udid] ?? DEFAULT_VIEWPORT_STATE;
+  if (!options.forceFit) {
+    return viewportState;
+  }
+  return {
+    ...viewportState,
+    pan: DEFAULT_VIEWPORT_STATE.pan,
+    viewMode: "fit",
+    zoom: null,
+  };
 }
 
 export function sanitizePersistedUiState(

client/src/styles/components.css

@@ -260,6 +260,7 @@
   max-height: min(72vh, 560px);
   display: flex;
   flex-direction: column;
+  min-height: 0;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 8px;
@@ -289,9 +290,11 @@
 }
 
 .sim-list {
-  flex: 1;
+  flex: 1 1 260px;
+  min-height: 0;
   overflow-y: auto;
   padding: 4px;
+  overscroll-behavior: contain;
   scrollbar-width: thin;
   scrollbar-color: var(--border) transparent;
 }
@@ -316,12 +319,14 @@
 
 .menu-actions {
   display: flex;
+  flex: 0 0 auto;
   flex-direction: column;
   padding: 4px;
 }
 
 .menu-section {
   display: flex;
+  flex: 0 0 auto;
   flex-direction: column;
   gap: 6px;
   padding: 8px;
@@ -460,6 +465,7 @@
   flex-direction: column;
   gap: 2px;
   width: 100%;
+  min-width: 0;
   padding: 7px 10px;
   border: none;
   border-radius: 6px;
@@ -491,18 +497,26 @@
 }
 
 .sim-item-name {
+  min-width: 0;
+  overflow: hidden;
   font-size: 12px;
   font-weight: 600;
   line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .sim-item-meta {
   display: flex;
   align-items: center;
   gap: 6px;
+  min-width: 0;
+  overflow: hidden;
   font-size: 11px;
   color: var(--text-secondary);
   line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .list-empty {

client/src/styles/layout.css

@@ -169,8 +169,29 @@
     max-width: calc(100vw - 24px);
   }
 
-  .menu-popover {
-    width: min(260px, calc(100vw - 16px));
+  .toolbar .menu-wrap .menu-popover {
+    position: fixed;
+    top: 46px;
+    right: 6px;
+    left: 6px;
+    width: auto;
+    height: calc(100dvh - 52px);
+    max-height: none;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  .menu-popover .sidebar-search {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: var(--surface);
+  }
+
+  .menu-popover .sim-list {
+    flex: 1 1 55dvh;
+    min-height: min(360px, 44dvh);
+    overflow-y: auto;
   }
 
   .hierarchy-panel {