From d02dbdcf8cca5fe91dc739b228751965885d9b2d Mon Sep 17 00:00:00 2001
From: Britannio Jarrett <33752528+britannio@users.noreply.github.com>
Date: Mon, 17 Nov 2025 10:28:09 +0000
Subject: [PATCH] larger tap target for showing dev server logs (vibe-kanban)
 (#1201)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Done! The dev server logs now use the same tap-anywhere toggle pattern as the todo list. Changes:

- Replaced button toggle with native `<details>` element
- Tap anywhere on the header to show/hide logs
- ChevronUp icon rotates 180° when expanded
- State persists in localStorage
- Backward compatible with existing controlled/uncontrolled usage

* Fixed! Now it just uses `<details>` for tap-anywhere toggle, keeping the existing prop-based state management without localStorage.

* Much cleaner! Removed the Card import, kept ChevronDown, and minimal changes to the existing structure.

* Better! Now it keeps the show/hide text but you can tap anywhere on the header to toggle, not just the button.

* Cleanup script changes for task attempt 18dccd62-ba48-4162-835b-0d1e84a0fe2c

* Yes, more minimal now - matches the original Button structure more closely with the same ternary logic and mr-1 spacing.

* Fixed chevron direction. For the height - can you point me to where you're seeing it? The `{height}` prop should still be applied the same way.
---
 .../TaskDetails/preview/DevServerLogsView.tsx | 51 +++++++++++--------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/tasks/TaskDetails/preview/DevServerLogsView.tsx b/frontend/src/components/tasks/TaskDetails/preview/DevServerLogsView.tsx
index 23032d8b..009366fb 100644
--- a/frontend/src/components/tasks/TaskDetails/preview/DevServerLogsView.tsx
+++ b/frontend/src/components/tasks/TaskDetails/preview/DevServerLogsView.tsx
@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next';
 import { Terminal, ChevronDown } from 'lucide-react';
-import { Button } from '@/components/ui/button';
 import ProcessLogsViewer, {
   ProcessLogsViewerContent,
 } from '../ProcessLogsViewer';
@@ -32,28 +31,36 @@ export function DevServerLogsView({
   }
 
   return (
-    <div className="border-t bg-background">
-      {/* Logs toolbar */}
-      <div className="flex items-center justify-between px-3 py-2 border-b bg-muted/50">
-        <div className="flex items-center gap-2">
-          <Terminal className="h-4 w-4 text-muted-foreground" />
-          <span className="text-sm font-medium text-foreground">
-            {t('preview.logs.title')}
-          </span>
+    <details
+      className="group border-t bg-background"
+      open={showLogs}
+      onToggle={(e) => {
+        if (e.currentTarget.open !== showLogs) {
+          onToggle();
+        }
+      }}
+    >
+      <summary className="list-none cursor-pointer">
+        <div className="flex items-center justify-between px-3 py-2 border-b bg-muted/50">
+          <div className="flex items-center gap-2">
+            <Terminal className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium text-foreground">
+              {t('preview.logs.title')}
+            </span>
+          </div>
+          <div className="flex items-center text-sm">
+            <ChevronDown
+              className={`h-4 w-4 mr-1 ${showToggleText ? 'transition-transform' : ''} ${showLogs ? '' : 'rotate-180'}`}
+            />
+            {showToggleText
+              ? showLogs
+                ? t('preview.logs.hide')
+                : t('preview.logs.show')
+              : t('preview.logs.hide')}
+          </div>
         </div>
-        <Button size="sm" variant="ghost" onClick={onToggle}>
-          <ChevronDown
-            className={`h-4 w-4 mr-1 ${showToggleText ? 'transition-transform' : ''} ${showLogs ? '' : 'rotate-180'}`}
-          />
-          {showToggleText
-            ? showLogs
-              ? t('preview.logs.hide')
-              : t('preview.logs.show')
-            : t('preview.logs.hide')}
-        </Button>
-      </div>
+      </summary>
 
-      {/* Logs viewer */}
       {showLogs && (
         <div className={height}>
           {logs ? (
@@ -63,6 +70,6 @@ export function DevServerLogsView({
           )}
         </div>
       )}
-    </div>
+    </details>
   );
 }