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 ( -
-
- {kanban} -
+
+ {/* Header is visible when panel is open */} + {isPanelOpen && rightHeader && ( +
+ {rightHeader} +
+ )} -
- {rightHeader && ( -
- {rightHeader} -
+
+ {!isPanelOpen ? ( + kanban + ) : showAux ? ( + + ) : ( + attempt )} -
{attempt}
-
- -
- {aux}
); 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 && ( )} - {typeof mode !== 'undefined' && onModeChange && isXL && ( + {typeof mode !== 'undefined' && onModeChange && (
)}