From 3526a2b71a07a3c56f397e11542be5bfa23864d9 Mon Sep 17 00:00:00 2001
From: shuki <shuki@shuki>
Date: Sat, 7 Mar 2026 01:28:38 +0200
Subject: [PATCH] Move docs panel to bottom on narrow screens (<80 cols)

On mobile/narrow terminals the .screen-with-docs container
switches from horizontal to vertical layout, placing the
help panel below the main content instead of beside it.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 tui/app.py | 34 ++++++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/tui/app.py b/tui/app.py
index 5ee56c4..88d8f4e 100644
--- a/tui/app.py
+++ b/tui/app.py
@@ -74,24 +74,38 @@ class GnizaApp(App):
         except NoMatches:
             pass
 
+    # Width threshold for switching docs panel to bottom
+    DOCS_VERTICAL_WIDTH = 80
+
     def on_resize(self, event: Resize) -> None:
-        try:
-            panel = self.screen.query_one("#docs-panel")
-        except NoMatches:
-            return
-        if getattr(panel, "_user_toggled", False):
-            return
-        panel.display = event.size.width >= self.DOCS_AUTO_HIDE_WIDTH
+        self._update_docs_layout(event.size.width)
 
     def on_screen_resume(self) -> None:
-        """Re-evaluate docs panel visibility when switching screens."""
+        """Re-evaluate docs panel layout when switching screens."""
+        self._update_docs_layout(self.size.width)
+
+    def _update_docs_layout(self, width: int) -> None:
         try:
             panel = self.screen.query_one("#docs-panel")
         except NoMatches:
             return
-        if getattr(panel, "_user_toggled", False):
+        if not getattr(panel, "_user_toggled", False):
+            panel.display = width >= self.DOCS_AUTO_HIDE_WIDTH
+        # Switch layout direction based on width
+        try:
+            container = self.screen.query_one(".screen-with-docs")
+        except NoMatches:
             return
-        panel.display = self.size.width >= self.DOCS_AUTO_HIDE_WIDTH
+        if width < self.DOCS_VERTICAL_WIDTH:
+            container.styles.layout = "vertical"
+            panel.styles.width = "100%"
+            panel.styles.min_width = None
+            panel.styles.max_height = "40%"
+        else:
+            container.styles.layout = "horizontal"
+            panel.styles.width = "30%"
+            panel.styles.min_width = 30
+            panel.styles.max_height = None
 
     async def action_quit(self) -> None:
         if job_manager.running_count() > 0: