Computer panel: open phone-first, full-height, full-bleed, tight grid

Five capture-verified panel fixes (vs the WorkClaw size captures):

- Open from chat lands at PHONE size (launcher sets device:phone), and the
  Computer launcher icon hides while the panel is open (ChatHeader).
- Card fills the column at every size (md:h-full, dropped the 652px centered
  card) so phone/tablet are full-height with the dock anchored at the bottom.
- Full bleeds horizontally (drop the px-6 inset + radius at full) so it meets
  the rail and covers the reserved chat — no squished text behind. Vertical
  pt-[88px] kept so the app header clears the chat-header close (no overlap).
- Home grid → grid-cols-[repeat(4,72px)] so icons stay 72px/tight at every
  width instead of stretching at tablet/full.

Regenerated computer-home baseline (now phone + full-height). typecheck/lint/
86 unit/31 E2E/6 visual green.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

frontend/src/components/chat/ChatHeader.tsx

@@ -74,18 +74,24 @@ export function ChatHeader({ onNewSession }: { onNewSession: () => void }) {
             <SquarePen aria-hidden size={18} />
           </button>
         </div>
-        <span
+        {/* The launcher hides while the panel is open (Close lives in the
-          aria-hidden
+            device overlay); opening always lands at phone size first. */}
-          className="hidden h-6 w-px shrink-0 bg-white/[0.12] md:block"
+        {!panelOpen && (
-        />
+          <>
-        <button
+            <span
-          type="button"
+              aria-hidden
-          aria-label="Computer"
+              className="hidden h-6 w-px shrink-0 bg-white/[0.12] md:block"
-          onClick={() => setParams({ app: "home" })}
+            />
-          className="inline-flex size-[42px] items-center justify-center rounded-full text-coral shadow-launcher transition-all duration-(--duration-normal) ease-app hover:bg-coral/10 active:scale-95"
+            <button
-        >
+              type="button"
-          <Monitor aria-hidden size={20} />
+              aria-label="Computer"
-        </button>
+              onClick={() => setParams({ app: "home", device: "phone" })}
+              className="inline-flex size-[42px] items-center justify-center rounded-full text-coral shadow-launcher transition-all duration-(--duration-normal) ease-app hover:bg-coral/10 active:scale-95"
+            >
+              <Monitor aria-hidden size={20} />
+            </button>
+          </>
+        )}
       </div>
 
       {/* Device-size controls + Close — a separate right-aligned overlay,

frontend/src/components/computer/DevicePanel.tsx

@@ -87,17 +87,19 @@ export function DevicePanel({ agent }: { agent: Agent }) {
     >
       <div
         data-testid="device-panel-theme"
-        className="flex h-full flex-col justify-center px-6 pt-[88px] pb-6 max-md:bg-background max-md:p-0"
+        className={`flex h-full flex-col pt-[88px] pb-6 max-md:bg-background max-md:p-0 ${
+          device === "full" ? "" : "px-6"
+        }`}
         style={clawThemeStyle(agent)}
       >
-        {/* Phone/tablet: a fixed 652px card centered in the column (it
+        {/* The card fills the column at every size (dock anchors to its
-            floats with empty space above/below on tall windows, like the
+            bottom). Full bleeds edge-to-edge (no inset/radius) so it meets the
-            reference) and caps to the column on short ones. Full + mobile
+            rail and covers the reserved chat; phone/tablet float inside the
-            stretch to fill. */}
+            px-6 wrapper with the 32px radius. */}
         <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 ${
-            device === "full" ? "md:h-full" : "md:h-[652px] md:max-h-full"
+            device === "full" ? "md:rounded-none md:shadow-none" : ""
           }`}
         >
           {mounted && (

frontend/src/components/computer/HomeScreen.tsx

@@ -95,7 +95,7 @@ export function HomeScreen({ agentName, onOpen }: HomeScreenProps) {
   return (
     <div className="relative flex flex-1 flex-col justify-between pt-5">
       <div
-        className="grid grid-cols-4 gap-x-4 gap-y-[34px] px-8"
+        className="grid grid-cols-[repeat(4,72px)] gap-x-4 gap-y-[34px] px-8"
         aria-label={`${agentName}'s apps`}
       >
         {HOME_GRID.map((tile) => (