Update 'reconnecting' location (vibe-kanban) (#643)

* ## ✅ Task Complete

Successfully fixed the reconnecting alert positioning issue. The alert now appears above the kanban board instead of to the left.

**Changes Made:**

1. **[responsive-config.ts](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-9967-update-rec/frontend/src/lib/responsive-config.ts)**: Updated `getMainContainerClasses` to always use column layout (`flex flex-col`) instead of conditional horizontal layout

2. **[project-tasks.tsx](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-9967-update-rec/frontend/src/pages/project-tasks.tsx)**:
   - Restructured JSX to use nested flex container for side-by-side layout
   - Positioned reconnecting alert with `w-full z-30 xl:sticky xl:top-0`
   - Wrapped kanban + panel in inner div with `xl:flex` for proper horizontal layout

**Result**: The reconnecting alert now spans the full width above the content at all breakpoints, maintaining proper scrolling behavior and z-index hierarchy.

✅ Code compiles successfully (`npm run check` passed)

* Cleanup script changes for task attempt 996743d1-2de9-4f01-9357-af435a138dc5

frontend/src/lib/responsive-config.ts

@@ -52,15 +52,13 @@ export const getBackdropClasses = (forceFullScreen: boolean) => {
   return `fixed inset-0 z-40 bg-background/80 backdrop-blur-sm ${PANEL_SIDE_BY_SIDE_BREAKPOINT}:hidden ${forceFullScreen ? '' : 'hidden'}`;
 };
 
-// Generate classes for main container (enable flex layout in side-by-side mode)
+// Generate classes for main container (always column layout, side-by-side moved to inner wrapper)
 export const getMainContainerClasses = (
   isPanelOpen: boolean,
   forceFullScreen: boolean
 ) => {
   const overlayClasses =
-    isPanelOpen && forceFullScreen
-      ? 'w-full h-full'
-      : `h-full ${PANEL_SIDE_BY_SIDE_BREAKPOINT}:flex`;
+    isPanelOpen && forceFullScreen ? 'w-full h-full' : 'h-full flex flex-col';
 
   return `${overlayClasses}`;
 };

frontend/src/pages/project-tasks.tsx

@@ -255,74 +255,76 @@ export function ProjectTasks() {
       className={`min-h-full ${getMainContainerClasses(isPanelOpen, isFullscreen)}`}
     >
       {streamError && (
-        <div>
-          <Alert>
-            <AlertTitle className="flex items-center gap-2">
-              <AlertTriangle size="16" />
-              Reconnecting
-            </AlertTitle>
-            <AlertDescription>{streamError}</AlertDescription>
-          </Alert>
-        </div>
+        <Alert className="w-full z-30 xl:sticky xl:top-0">
+          <AlertTitle className="flex items-center gap-2">
+            <AlertTriangle size="16" />
+            Reconnecting
+          </AlertTitle>
+          <AlertDescription>{streamError}</AlertDescription>
+        </Alert>
       )}
-      {/* Left Column - Kanban Section */}
-      <div className={getKanbanSectionClasses(isPanelOpen, isFullscreen)}>
-        {tasks.length === 0 ? (
-          <div className="max-w-7xl mx-auto mt-8">
-            <Card>
-              <CardContent className="text-center py-8">
-                <p className="text-muted-foreground">
-                  No tasks found for this project.
-                </p>
-                <Button className="mt-4" onClick={handleCreateNewTask}>
-                  <Plus className="h-4 w-4 mr-2" />
-                  Create First Task
-                </Button>
-              </CardContent>
-            </Card>
-          </div>
-        ) : (
-          <div className="w-full h-full overflow-x-auto">
-            <TaskKanbanBoard
-              tasks={tasks}
-              searchQuery={searchQuery}
-              onDragEnd={handleDragEnd}
-              onEditTask={handleEditTask}
-              onDeleteTask={handleDeleteTask}
-              onDuplicateTask={handleDuplicateTask}
-              onViewTaskDetails={handleViewTaskDetails}
-              isPanelOpen={isPanelOpen}
-            />
-          </div>
+
+      {/* Kanban + Panel Container - uses side-by-side layout on xl+ */}
+      <div className="flex-1 min-h-0 xl:flex">
+        {/* Left Column - Kanban Section */}
+        <div className={getKanbanSectionClasses(isPanelOpen, isFullscreen)}>
+          {tasks.length === 0 ? (
+            <div className="max-w-7xl mx-auto mt-8">
+              <Card>
+                <CardContent className="text-center py-8">
+                  <p className="text-muted-foreground">
+                    No tasks found for this project.
+                  </p>
+                  <Button className="mt-4" onClick={handleCreateNewTask}>
+                    <Plus className="h-4 w-4 mr-2" />
+                    Create First Task
+                  </Button>
+                </CardContent>
+              </Card>
+            </div>
+          ) : (
+            <div className="w-full h-full overflow-x-auto">
+              <TaskKanbanBoard
+                tasks={tasks}
+                searchQuery={searchQuery}
+                onDragEnd={handleDragEnd}
+                onEditTask={handleEditTask}
+                onDeleteTask={handleDeleteTask}
+                onDuplicateTask={handleDuplicateTask}
+                onViewTaskDetails={handleViewTaskDetails}
+                isPanelOpen={isPanelOpen}
+              />
+            </div>
+          )}
+        </div>
+
+        {/* Right Column - Task Details Panel */}
+        {isPanelOpen && (
+          <TaskDetailsPanel
+            task={selectedTask}
+            projectHasDevScript={!!project?.dev_script}
+            projectId={projectId!}
+            onClose={handleClosePanel}
+            onEditTask={handleEditTask}
+            onDeleteTask={handleDeleteTask}
+            isDialogOpen={isProjectSettingsOpen}
+            isFullScreen={isFullscreen}
+            setFullScreen={
+              selectedAttempt
+                ? (fullscreen) => {
+                    const baseUrl = `/projects/${projectId}/tasks/${selectedTask!.id}/attempts/${selectedAttempt.id}`;
+                    const fullUrl = fullscreen ? `${baseUrl}/full` : baseUrl;
+                    navigate(fullUrl, { replace: true });
+                  }
+                : undefined
+            }
+            selectedAttempt={selectedAttempt}
+            attempts={attempts}
+            setSelectedAttempt={setSelectedAttempt}
+          />
         )}
       </div>
 
-      {/* Right Column - Task Details Panel */}
-      {isPanelOpen && (
-        <TaskDetailsPanel
-          task={selectedTask}
-          projectHasDevScript={!!project?.dev_script}
-          projectId={projectId!}
-          onClose={handleClosePanel}
-          onEditTask={handleEditTask}
-          onDeleteTask={handleDeleteTask}
-          isDialogOpen={isProjectSettingsOpen}
-          isFullScreen={isFullscreen}
-          setFullScreen={
-            selectedAttempt
-              ? (fullscreen) => {
-                  const baseUrl = `/projects/${projectId}/tasks/${selectedTask!.id}/attempts/${selectedAttempt.id}`;
-                  const fullUrl = fullscreen ? `${baseUrl}/full` : baseUrl;
-                  navigate(fullUrl, { replace: true });
-                }
-              : undefined
-          }
-          selectedAttempt={selectedAttempt}
-          attempts={attempts}
-          setSelectedAttempt={setSelectedAttempt}
-        />
-      )}
-
       {/* Dialogs - rendered at main container level to avoid stacking issues */}
 
       {taskToDelete && (