From c459ffe1ad77bc4ff3bb76857d01243fc4637fbc Mon Sep 17 00:00:00 2001
From: Louis Knight-Webb <louis@bloop.ai>
Date: Wed, 22 Oct 2025 19:39:32 +0100
Subject: [PATCH] Don't hide attempt header on smaller screens (Vibe Kanban)
 (#1081)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Done! The attempt header now displays on small screens. The fix wraps the mobile attempt panel with the same header structure used on desktop—a sticky header with proper z-index and styling. All type checks pass.

* Cleanup script changes for task attempt 82b32560-3a3b-401f-bd84-40fc7f6b53ba

* Done! The preview and diff toggle buttons (and divider) are now hidden on mobile screens. The header will only show the actions dropdown and close button on small screens.
---
 frontend/src/components/layout/TasksLayout.tsx          | 9 +++++++--
 frontend/src/components/panels/AttemptHeaderActions.tsx | 6 ++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/layout/TasksLayout.tsx b/frontend/src/components/layout/TasksLayout.tsx
index 69334dd0..b24890f3 100644
--- a/frontend/src/components/layout/TasksLayout.tsx
+++ b/frontend/src/components/layout/TasksLayout.tsx
@@ -285,13 +285,18 @@ export function TasksLayout({
         </div>
 
         <div
-          className="min-w-0 min-h-0 overflow-hidden border-l"
+          className="min-w-0 min-h-0 overflow-hidden border-l flex flex-col"
           aria-hidden={!isAttemptVisible}
           aria-label="Details"
           role="region"
           style={{ pointerEvents: isAttemptVisible ? 'auto' : 'none' }}
         >
-          {attempt}
+          {rightHeader && (
+            <div className="shrink-0 sticky top-0 z-20 bg-background border-b">
+              {rightHeader}
+            </div>
+          )}
+          <div className="flex-1 min-h-0">{attempt}</div>
         </div>
 
         <div
diff --git a/frontend/src/components/panels/AttemptHeaderActions.tsx b/frontend/src/components/panels/AttemptHeaderActions.tsx
index 2d61b992..9dadc781 100644
--- a/frontend/src/components/panels/AttemptHeaderActions.tsx
+++ b/frontend/src/components/panels/AttemptHeaderActions.tsx
@@ -12,6 +12,7 @@ import type { LayoutMode } from '../layout/TasksLayout';
 import type { TaskAttempt, TaskWithAttemptStatus } from 'shared/types';
 import { ActionsDropdown } from '../ui/ActionsDropdown';
 import { usePostHog } from 'posthog-js/react';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
 
 interface AttemptHeaderActionsProps {
   onClose: () => void;
@@ -30,10 +31,11 @@ export const AttemptHeaderActions = ({
 }: AttemptHeaderActionsProps) => {
   const { t } = useTranslation('tasks');
   const posthog = usePostHog();
+  const isXL = useMediaQuery('(min-width: 1280px)');
 
   return (
     <>
-      {typeof mode !== 'undefined' && onModeChange && (
+      {typeof mode !== 'undefined' && onModeChange && isXL && (
         <TooltipProvider>
           <ToggleGroup
             type="single"
@@ -101,7 +103,7 @@ export const AttemptHeaderActions = ({
           </ToggleGroup>
         </TooltipProvider>
       )}
-      {typeof mode !== 'undefined' && onModeChange && (
+      {typeof mode !== 'undefined' && onModeChange && isXL && (
         <div className="h-4 w-px bg-border" />
       )}
       <ActionsDropdown task={task} attempt={attempt} />