From 3299ff1d8a284d93e0c169d56e6e3ee6b652f2ad Mon Sep 17 00:00:00 2001
From: Alex Netsch <alex@bloop.ai>
Date: Mon, 29 Sep 2025 13:52:30 +0100
Subject: [PATCH] Fix children layout (vibe-kanban) (#873)

* Perfect! I've updated the child tasks layout to always display horizontally. Here's what changed:

**Before**: Used a responsive CSS grid (`grid-cols-1 md:grid-cols-2 xl:grid-cols-3`) that would stack cards vertically on smaller screens.

**After**: Replaced with a horizontal flexbox layout that:
- Uses `flex` with `gap-4` for consistent spacing
- Adds `overflow-x-auto` to enable horizontal scrolling when needed
- Wraps each card in a `flex-none w-80` container to maintain consistent card width
- Adds `pb-2` for bottom padding to account for the scrollbar

The child tasks will now always be laid out horizontally regardless of screen size, with horizontal scrolling when there are too many cards to fit in the available width.

* Perfect! I've updated the child tasks layout to always display vertically. The changes:

- Used `flex flex-col` to create a vertical flexbox layout
- Removed the responsive grid logic and horizontal overflow handling
- Each card now spans the full width and stacks vertically with consistent `gap-4` spacing

The child tasks will now always be laid out vertically in a single column, regardless of screen size.
---
 .../src/components/tasks/TaskRelationshipViewer.tsx | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/frontend/src/components/tasks/TaskRelationshipViewer.tsx b/frontend/src/components/tasks/TaskRelationshipViewer.tsx
index 9eac4593..a31e6304 100644
--- a/frontend/src/components/tasks/TaskRelationshipViewer.tsx
+++ b/frontend/src/components/tasks/TaskRelationshipViewer.tsx
@@ -8,7 +8,6 @@ import type {
   TaskWithAttemptStatus,
 } from 'shared/types';
 import { ChevronDown, ChevronRight } from 'lucide-react';
-import { cn } from '@/lib/utils';
 
 interface TaskRelationshipViewerProps {
   selectedAttempt: TaskAttempt | null;
@@ -148,17 +147,7 @@ export function TaskRelationshipViewer({
                 </div>
 
                 {childrenExpanded && (
-                  <div
-                    className={cn(
-                      'grid gap-4',
-                      // Responsive grid: 1 col on mobile, 2 on tablet, 3 on desktop
-                      'grid-cols-1 md:grid-cols-2 xl:grid-cols-3',
-                      // Adjust based on number of children
-                      childTasks.length === 1 &&
-                        'md:grid-cols-1 xl:grid-cols-1 max-w-md mx-auto',
-                      childTasks.length === 2 && 'md:grid-cols-2 xl:grid-cols-2'
-                    )}
-                  >
+                  <div className="flex flex-col gap-4">
                     {childTasks.map((childTask) => (
                       <TaskRelationshipCard
                         key={childTask.id}