fix(web): floating preview shows a frame immediately on open + is resizable

The floating preview opened empty and stayed empty until the display next
CHANGED - the SSE stream only pushes frames on change, and the panel only
consumed frames while already open, so the connection's initial frame
(sent while the panel was closed) was dropped. Reported from mobile
testing as "the button doesn't work".

- updateDisplayPreview now caches the latest frame globally regardless of
  panel state; opening the panel populates the image from that cache
  instantly, then live frames take over.
- Resizable: a size button cycles 192/256/384/512px presets (persisted per
  browser; works on touch), and desktop additionally gets a native drag
  handle (CSS resize: both). The image is fluid within the panel; on
  phones the panel is capped to the viewport width. The size icon
  (fa-up-right-and-down-left-from-center) is verified present in the
  vendored FA 6.0.0.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KEZK1P1Q1fu5pcuVrkrCFZ

web_interface/templates/v3/base.html

@@ -563,13 +563,20 @@
         <div id="floating-preview" class="floating-preview" style="display:none">
             <div class="flex items-center justify-between px-2 py-1">
                 <span class="text-xs text-gray-300"><i class="fas fa-tv mr-1"></i>Live Preview</span>
-                <button type="button" onclick="window.toggleFloatingPreview(false)"
-                        class="text-gray-400 hover:text-white ml-2" aria-label="Close live preview">
-                    <i class="fas fa-times text-xs"></i>
-                </button>
+                <span class="flex items-center">
+                    <button type="button" onclick="window.cycleFloatingPreviewSize()"
+                            class="text-gray-400 hover:text-white ml-2" aria-label="Cycle preview size"
+                            title="Cycle preview size (drag the corner to resize on desktop)">
+                        <i class="fas fa-up-right-and-down-left-from-center text-xs"></i>
+                    </button>
+                    <button type="button" onclick="window.toggleFloatingPreview(false)"
+                            class="text-gray-400 hover:text-white ml-2" aria-label="Close live preview">
+                        <i class="fas fa-times text-xs"></i>
+                    </button>
+                </span>
             </div>
             <img id="floating-preview-img" alt="Live display preview"
-                 style="image-rendering: pixelated; display: block; width: 256px; height: auto;">
+                 style="image-rendering: pixelated; display: block; width: 100%; height: auto;">
         </div>
         <button id="floating-preview-toggle" type="button" onclick="window.toggleFloatingPreview(true)"
                 class="floating-preview-toggle" style="display:none"