From 2b79bd943aa79ea89b408a1becd890545b916ea0 Mon Sep 17 00:00:00 2001
From: praxagent <tim@praxagent.ai>
Date: Tue, 4 Aug 2026 18:16:43 +0000
Subject: [PATCH] fix(spaces): mobile board could not scroll down, and chat
 never appeared
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two reports from a phone, one root cause each.

The Kanban board was overflow-x-auto overflow-y-hidden. On desktop that is
right — columns are full-height and scroll internally. On mobile a column is
taller than the screen, so everything below the fold was unreachable: you could
scroll sideways but not down. Below md the board now scrolls vertically and
columns size to their content, with the inner per-column scroll kept for md+
so mobile does not get a nested scroll region that traps the gesture.

The space chat was a flex sibling that split the screen. Competing with the tab
content for height on a tall board, it was pushed past the bottom edge and
simply never appeared when toggled. On mobile it is now a fixed bottom sheet at
z-40, above the tab bar at z-30 — 'over content' is the point — with
pb-mobile-nav so the composer clears the bar and gives the space back when the
keyboard opens. Desktop keeps the resizable in-flow column unchanged.
---
 .../components/panels/LibrarySpaceView.tsx    | 15 ++++++++---
 frontend/src/components/panels/SpacePage.tsx  | 26 +++++++++++++------
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/panels/LibrarySpaceView.tsx b/frontend/src/components/panels/LibrarySpaceView.tsx
index 7a14a37..20a914e 100644
--- a/frontend/src/components/panels/LibrarySpaceView.tsx
+++ b/frontend/src/components/panels/LibrarySpaceView.tsx
@@ -446,8 +446,14 @@ export function LibrarySpaceView({ project, dark, onClose, embedded }: Props) {
             )}
           </div>
 
-          <div className="flex-1 overflow-x-auto overflow-y-hidden p-4">
-            <div className="flex gap-3 h-full min-w-max mx-auto justify-center">
+          {/* Desktop: columns are full-height and scroll internally, so the
+              board itself must not scroll vertically. Mobile: a column is
+              taller than the screen, and overflow-y-hidden made everything
+              below the fold unreachable — you could scroll sideways but not
+              down. Below md the board scrolls vertically and the columns
+              size to their content instead of fighting for a bounded height. */}
+          <div className="flex-1 overflow-x-auto overflow-y-auto md:overflow-y-hidden p-4">
+            <div className="flex gap-3 h-auto md:h-full min-w-max mx-auto justify-center items-start md:items-stretch">
               {columns.map((col: LibraryTaskColumn) => {
                 const isDropTarget = dragOverColumn === col.id;
                 return (
@@ -513,7 +519,10 @@ export function LibrarySpaceView({ project, dark, onClose, embedded }: Props) {
                       )}
                     </div>
 
-                    <div className="flex-1 overflow-y-auto p-2 space-y-2">
+                    {/* On mobile the board scrolls, so a column must grow to
+                        its content; an inner overflow-y-auto here would create
+                        a second, nested scroll region that traps the gesture. */}
+                    <div className="flex-1 md:overflow-y-auto p-2 space-y-2">
                       {(tasksByColumn[col.id] ?? []).map((task) => (
                         <TaskCard
                           key={task.id}
diff --git a/frontend/src/components/panels/SpacePage.tsx b/frontend/src/components/panels/SpacePage.tsx
index 2d9df77..9948c11 100644
--- a/frontend/src/components/panels/SpacePage.tsx
+++ b/frontend/src/components/panels/SpacePage.tsx
@@ -637,15 +637,25 @@ export function SpacePage({ spaceSlug, onBack }: Props) {
         )}
         {showingSpaceChat && (
           <div className={clsx(
-            'w-full md:w-[var(--chat-w)] flex flex-col shrink-0 min-h-0',
-            'border-t md:border-t-0 md:border-l',
+            'flex flex-col min-h-0',
+            // MOBILE: an overlay sheet, not a flex sibling. As a sibling it
+            // competed with the tab content for height, so on a tall board it
+            // was pushed below the fold and simply never appeared. Fixed to
+            // the bottom above everything, it always shows when toggled.
+            // z-40 clears the mobile tab bar (z-30), and the sheet sits ON
+            // TOP of it rather than behind: 'over content' is the whole point.
+            // pb-mobile-nav gives the bar its 3.5rem back, and the CSS rule
+            // zeroes that padding the moment the keyboard opens and the bar
+            // hides — otherwise a dead strip sits under the composer.
+            'fixed inset-x-0 bottom-0 z-40 h-[60svh] min-h-[12rem] border-t shadow-2xl',
+            'pb-mobile-nav pb-[calc(3.5rem+env(safe-area-inset-bottom,0px))] md:pb-0',
+            // DESKTOP: back to the resizable in-flow column it was.
+            'md:static md:inset-auto md:z-auto md:h-auto md:min-h-0 md:shadow-none',
+            'md:w-[var(--chat-w)] md:shrink-0 md:border-t-0 md:border-l',
             // svh, not vh: on iOS `vh` is the LARGE viewport — the height as
-            // if the browser chrome were hidden — so a 40vh pane is taller than
-            // 40% of what you can actually see, and with shrink-0 it can be
-            // pushed past the bottom edge. `svh` is the small viewport, which
-            // is the one that is always really there. A floor keeps it usable
-            // rather than a sliver on a short screen.
-            'h-[45svh] min-h-[10rem] md:h-auto md:min-h-0',
+            // if the browser chrome were hidden — so a 60vh pane is taller than
+            // 60% of what you can actually see and runs past the bottom edge.
+            // `svh` is the small viewport, the one that is always really there.
           )}
             style={{
               borderColor: 'var(--space-accent-border)',