Don't hide attempt header on smaller screens (Vibe Kanban) (#1081)

* 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

@@ -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

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} />