Computer panel: fixed 652px card, centered (not stretched), matching WorkClaw

The card used h-full, so it stretched to fill the column — on tall windows
it grew past the reference (808px at a 920px viewport) instead of staying a
content-sized panel. WorkClaw centers a fixed ~652px card that floats with
empty space above/below. Now phone/tablet → md:h-[652px] (md:max-h-full so
it still caps on short windows), centered via justify-center on the column
wrapper; full + mobile keep h-full to fill. Verified at a 920px window: card
652px, top 166 / bottom 818 (centered, floating) instead of 808 stretched.
At the 720px test viewport it caps to the column either way, so no baseline
change — full suite (37) green.

Co-Authored-By: Claude Fable 5 <[email protected]>

frontend/src/components/computer/DevicePanel.tsx

@@ -28,7 +28,7 @@ const OVERLAY =
  *  hosting every sub-app behind ?app=. The size toggles and close live in
  *  the chat header; this owns the card. */
 export function DevicePanel({ agent }: { agent: Agent }) {
-  const [{ app }, setParams] = useQueryStates(panelParsers, {
+  const [{ app, device }, setParams] = useQueryStates(panelParsers, {
     shallow: true,
   });
   const cardRef = useRef<HTMLDivElement>(null);
@@ -77,12 +77,18 @@ export function DevicePanel({ agent }: { agent: Agent }) {
     >
       <div
         data-testid="device-panel-theme"
-        className="flex h-full flex-col px-6 pt-[88px] pb-6 max-md:bg-background max-md:p-0"
+        className="flex h-full flex-col justify-center px-6 pt-[88px] pb-6 max-md:bg-background max-md:p-0"
         style={clawThemeStyle(agent)}
       >
+        {/* Phone/tablet: a fixed 652px card centered in the column (it
+            floats with empty space above/below on tall windows, like the
+            reference) and caps to the column on short ones. Full + mobile
+            stretch to fill. */}
         <div
           ref={cardRef}
-          className="pointer-events-auto relative flex h-full w-full flex-col overflow-hidden rounded-[32px] shadow-screen max-md:rounded-none max-md:shadow-none"
+          className={`pointer-events-auto relative flex h-full w-full flex-col overflow-hidden rounded-[32px] shadow-screen max-md:rounded-none max-md:shadow-none ${
+            device === "full" ? "md:h-full" : "md:h-[652px] md:max-h-full"
+          }`}
         >
           {mounted && (
             <WallpaperSurface>