fix(browser): keep the preview frame stable across Snapshot/Screencast

Author: vishnuv688

packages/app/src/components/browser/snapshot-styles.ts

@@ -106,10 +106,13 @@ export const snapshotStyles = css`
 
   .view-toggle button {
     padding: 5px 11px;
+    min-width: 78px;
+    text-align: center;
     font-size: 11px;
     font-weight: 600;
     font-family: inherit;
     border: none;
+    outline: none;
     background: transparent;
     color: var(--vscode-descriptionForeground, #ccc);
     cursor: pointer;
@@ -145,4 +148,10 @@ export const snapshotStyles = css`
     line-height: 1;
     margin-left: 6px;
   }
+  /* kept visible (greyed) in snapshot mode so the toggle cluster doesn't change
+     width when switching modes */
+  .video-select:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
 `

packages/app/src/components/browser/snapshot.ts

@@ -204,15 +204,20 @@ export class DevtoolsBrowser extends Element {
         Math.min(availW / viewportWidth, availH / effectiveViewportH)
       )
 
-      this.section.style.width = `${viewportWidth * scale}px`
-      this.section.style.height = `${effectiveViewportH * scale + headerSize.height}px`
+      // Keep the frame at full pane size (same as screencast) so toggling
+      // between the two modes never resizes it; the replay iframe is scaled to
+      // fit and centred horizontally inside the stable frame.
+      this.section.style.width = '100%'
+      this.section.style.height = '100%'
 
       // Iframe absent in screenshot/video modes — section sizing above still runs.
       if (this.iframe) {
         this.iframe.style.width = `${viewportWidth}px`
         this.iframe.style.height = `${viewportHeight}px`
         this.iframe.style.transformOrigin = '0 0'
         this.iframe.style.transform = `scale(${scale})`
+        this.iframe.style.left = `${Math.max(0, (availW - viewportWidth * scale) / 2)}px`
+        this.iframe.style.top = '0px'
       }
     })
   }
@@ -525,9 +530,10 @@ export class DevtoolsBrowser extends Element {
         >
           Screencast
         </button>
-        ${this.#videos.length > 1 && this.#viewMode === 'video'
+        ${this.#videos.length > 1
           ? html`<select
               class="video-select"
+              ?disabled=${this.#viewMode !== 'video'}
               @change=${(e: Event) => {
                 this.#setActiveVideo(
                   Number((e.target as HTMLSelectElement).value)