From 20352f28936e22d50fd3f6049ea430888feed4c4 Mon Sep 17 00:00:00 2001
From: Stephan Fitzpatrick <stephan@knowsuchagency.com>
Date: Wed, 17 Dec 2025 04:02:01 -0800
Subject: [PATCH] feat: enable diff and preview panels on smaller screens
 (#1524)

On screens < 1280px, users can now access Preview and Diffs views
via toggle buttons in the header, creating a tab-like experience.

Changes:
- Remove isXL check from AttemptHeaderActions toggle buttons
- Simplify mobile layout to switch between attempt/aux content based on mode
- Keyboard shortcuts (Cmd/Ctrl+Enter) now cycle through views on mobile

Closes #1523
---
 .../src/components/layout/TasksLayout.tsx     | 60 ++++++-------------
 .../panels/AttemptHeaderActions.tsx           |  6 +-
 2 files changed, 19 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/layout/TasksLayout.tsx b/frontend/src/components/layout/TasksLayout.tsx
index 88ea58de..ba703916 100644
--- a/frontend/src/components/layout/TasksLayout.tsx
+++ b/frontend/src/components/layout/TasksLayout.tsx
@@ -279,53 +279,27 @@ export function TasksLayout({
   const desktopKey = isPanelOpen ? 'desktop-with-panel' : 'kanban-only';
 
   if (isMobile) {
-    const columns = isPanelOpen ? ['0fr', '1fr', '0fr'] : ['1fr', '0fr', '0fr'];
-    const gridTemplateColumns = `minmax(0, ${columns[0]}) minmax(0, ${columns[1]}) minmax(0, ${columns[2]})`;
-    const isKanbanVisible = columns[0] !== '0fr';
-    const isAttemptVisible = columns[1] !== '0fr';
-    const isAuxVisible = columns[2] !== '0fr';
+    // When panel is open and mode is set, show aux content (preview/diffs)
+    // Otherwise show attempt content
+    const showAux = isPanelOpen && mode !== null;
 
     return (
-      <div
-        className="h-full min-h-0 grid"
-        style={{
-          gridTemplateColumns,
-          transition: 'grid-template-columns 250ms cubic-bezier(0.2, 0, 0, 1)',
-        }}
-      >
-        <div
-          className="min-w-0 min-h-0 overflow-hidden"
-          aria-hidden={!isKanbanVisible}
-          aria-label="Kanban board"
-          role="region"
-          style={{ pointerEvents: isKanbanVisible ? 'auto' : 'none' }}
-        >
-          {kanban}
-        </div>
+      <div className="h-full min-h-0 flex flex-col">
+        {/* Header is visible when panel is open */}
+        {isPanelOpen && rightHeader && (
+          <div className="shrink-0 sticky top-0 z-20 bg-background border-b">
+            {rightHeader}
+          </div>
+        )}
 
-        <div
-          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' }}
-        >
-          {rightHeader && (
-            <div className="shrink-0 sticky top-0 z-20 bg-background border-b">
-              {rightHeader}
-            </div>
+        <div className="flex-1 min-h-0">
+          {!isPanelOpen ? (
+            kanban
+          ) : showAux ? (
+            <AuxRouter mode={mode} aux={aux} />
+          ) : (
+            attempt
           )}
-          <div className="flex-1 min-h-0">{attempt}</div>
-        </div>
-
-        <div
-          className="min-w-0 min-h-0 overflow-hidden border-l"
-          aria-hidden={!isAuxVisible}
-          aria-label={mode === 'preview' ? 'Preview' : 'Diffs'}
-          role="region"
-          style={{ pointerEvents: isAuxVisible ? 'auto' : 'none' }}
-        >
-          {aux}
         </div>
       </div>
     );
diff --git a/frontend/src/components/panels/AttemptHeaderActions.tsx b/frontend/src/components/panels/AttemptHeaderActions.tsx
index 266865df..6ec0e2b2 100644
--- a/frontend/src/components/panels/AttemptHeaderActions.tsx
+++ b/frontend/src/components/panels/AttemptHeaderActions.tsx
@@ -12,7 +12,6 @@ import type { LayoutMode } from '../layout/TasksLayout';
 import type { TaskAttempt, TaskWithAttemptStatus } from 'shared/types';
 import { ActionsDropdown } from '../ui/actions-dropdown';
 import { usePostHog } from 'posthog-js/react';
-import { useMediaQuery } from '@/hooks/useMediaQuery';
 import type { SharedTaskRecord } from '@/hooks/useProjectTasks';
 
 interface AttemptHeaderActionsProps {
@@ -34,11 +33,10 @@ export const AttemptHeaderActions = ({
 }: AttemptHeaderActionsProps) => {
   const { t } = useTranslation('tasks');
   const posthog = usePostHog();
-  const isXL = useMediaQuery('(min-width: 1280px)');
 
   return (
     <>
-      {typeof mode !== 'undefined' && onModeChange && isXL && (
+      {typeof mode !== 'undefined' && onModeChange && (
         <TooltipProvider>
           <ToggleGroup
             type="single"
@@ -106,7 +104,7 @@ export const AttemptHeaderActions = ({
           </ToggleGroup>
         </TooltipProvider>
       )}
-      {typeof mode !== 'undefined' && onModeChange && isXL && (
+      {typeof mode !== 'undefined' && onModeChange && (
         <div className="h-4 w-px bg-border" />
       )}
       <ActionsDropdown task={task} attempt={attempt} sharedTask={sharedTask} />