From 9915bb90b421596186b9f62dfc9814f25f99e66f Mon Sep 17 00:00:00 2001
From: Henrik <henrik092@users.noreply.github.com>
Date: Sun, 29 Mar 2026 18:52:00 +0000
Subject: [PATCH] fix(web): consolidate header actions into overflow menu on
 mobile

On mobile viewports the chat header renders all action buttons
(terminal, diff, open-in, git, scripts) inline, which overflows
the narrow screen and makes the title unreadable.

Wrap the action buttons in a Popover behind an ellipsis button when
isMobile is true. Desktop layout is completely unchanged.

Uses existing useIsMobile() hook, Button, and Popover primitives
already established in the codebase.

Related #1441
---
 apps/web/src/components/chat/ChatHeader.tsx | 219 +++++++++++++-------
 1 file changed, 149 insertions(+), 70 deletions(-)

diff --git a/apps/web/src/components/chat/ChatHeader.tsx b/apps/web/src/components/chat/ChatHeader.tsx
index f04c9879fa..2b293ffd92 100644
--- a/apps/web/src/components/chat/ChatHeader.tsx
+++ b/apps/web/src/components/chat/ChatHeader.tsx
@@ -6,13 +6,16 @@ import {
 } from "@t3tools/contracts";
 import { memo } from "react";
 import GitActionsControl from "../GitActionsControl";
-import { DiffIcon, TerminalSquareIcon } from "lucide-react";
+import { DiffIcon, EllipsisIcon, TerminalSquareIcon } from "lucide-react";
 import { Badge } from "../ui/badge";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import ProjectScriptsControl, { type NewProjectScriptInput } from "../ProjectScriptsControl";
 import { Toggle } from "../ui/toggle";
 import { SidebarTrigger } from "../ui/sidebar";
 import { OpenInPicker } from "./OpenInPicker";
+import { useIsMobile } from "~/hooks/useMediaQuery";
+import { Button } from "../ui/button";
+import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
 
 interface ChatHeaderProps {
   activeThreadId: ThreadId;
@@ -61,6 +64,8 @@ export const ChatHeader = memo(function ChatHeader({
   onToggleTerminal,
   onToggleDiff,
 }: ChatHeaderProps) {
+  const isMobile = useIsMobile();
+
   return (
     <div className="@container/header-actions flex min-w-0 flex-1 items-center gap-2">
       <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden sm:gap-3">
@@ -82,75 +87,149 @@ export const ChatHeader = memo(function ChatHeader({
           </Badge>
         )}
       </div>
-      <div className="flex shrink-0 items-center justify-end gap-2 @3xl/header-actions:gap-3">
-        {activeProjectScripts && (
-          <ProjectScriptsControl
-            scripts={activeProjectScripts}
-            keybindings={keybindings}
-            preferredScriptId={preferredScriptId}
-            onRunScript={onRunProjectScript}
-            onAddScript={onAddProjectScript}
-            onUpdateScript={onUpdateProjectScript}
-            onDeleteScript={onDeleteProjectScript}
-          />
-        )}
-        {activeProjectName && (
-          <OpenInPicker
-            keybindings={keybindings}
-            availableEditors={availableEditors}
-            openInCwd={openInCwd}
-          />
-        )}
-        {activeProjectName && <GitActionsControl gitCwd={gitCwd} activeThreadId={activeThreadId} />}
-        <Tooltip>
-          <TooltipTrigger
-            render={
-              <Toggle
-                className="shrink-0"
-                pressed={terminalOpen}
-                onPressedChange={onToggleTerminal}
-                aria-label="Toggle terminal drawer"
-                variant="outline"
-                size="xs"
-                disabled={!terminalAvailable}
-              >
-                <TerminalSquareIcon className="size-3" />
-              </Toggle>
-            }
-          />
-          <TooltipPopup side="bottom">
-            {!terminalAvailable
-              ? "Terminal is unavailable until this thread has an active project."
-              : terminalToggleShortcutLabel
-                ? `Toggle terminal drawer (${terminalToggleShortcutLabel})`
-                : "Toggle terminal drawer"}
-          </TooltipPopup>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger
-            render={
-              <Toggle
-                className="shrink-0"
-                pressed={diffOpen}
-                onPressedChange={onToggleDiff}
-                aria-label="Toggle diff panel"
-                variant="outline"
-                size="xs"
-                disabled={!isGitRepo}
-              >
-                <DiffIcon className="size-3" />
-              </Toggle>
-            }
-          />
-          <TooltipPopup side="bottom">
-            {!isGitRepo
-              ? "Diff panel is unavailable because this project is not a git repository."
-              : diffToggleShortcutLabel
-                ? `Toggle diff panel (${diffToggleShortcutLabel})`
-                : "Toggle diff panel"}
-          </TooltipPopup>
-        </Tooltip>
-      </div>
+      {isMobile ? (
+        <Popover>
+          <PopoverTrigger
+            render={<Button size="icon-xs" variant="outline" aria-label="More actions" />}
+          >
+            <EllipsisIcon aria-hidden="true" className="size-4" />
+          </PopoverTrigger>
+          <PopoverPopup side="bottom" align="end" sideOffset={4} className="w-auto">
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center justify-between gap-4">
+                <span className="text-sm text-foreground">Terminal</span>
+                <Toggle
+                  className="shrink-0"
+                  pressed={terminalOpen}
+                  onPressedChange={onToggleTerminal}
+                  aria-label="Toggle terminal drawer"
+                  variant="outline"
+                  size="xs"
+                  disabled={!terminalAvailable}
+                >
+                  <TerminalSquareIcon className="size-3" />
+                </Toggle>
+              </div>
+              <div className="flex items-center justify-between gap-4">
+                <span className="text-sm text-foreground">Diff</span>
+                <Toggle
+                  className="shrink-0"
+                  pressed={diffOpen}
+                  onPressedChange={onToggleDiff}
+                  aria-label="Toggle diff panel"
+                  variant="outline"
+                  size="xs"
+                  disabled={!isGitRepo}
+                >
+                  <DiffIcon className="size-3" />
+                </Toggle>
+              </div>
+              {activeProjectName && (
+                <>
+                  <div className="h-px bg-border" />
+                  <div className="flex items-center gap-2">
+                    <OpenInPicker
+                      keybindings={keybindings}
+                      availableEditors={availableEditors}
+                      openInCwd={openInCwd}
+                    />
+                  </div>
+                </>
+              )}
+              {activeProjectName && (
+                <div className="flex items-center gap-2">
+                  <GitActionsControl gitCwd={gitCwd} activeThreadId={activeThreadId} />
+                </div>
+              )}
+              {activeProjectScripts && (
+                <div className="flex items-center gap-2">
+                  <ProjectScriptsControl
+                    scripts={activeProjectScripts}
+                    keybindings={keybindings}
+                    preferredScriptId={preferredScriptId}
+                    onRunScript={onRunProjectScript}
+                    onAddScript={onAddProjectScript}
+                    onUpdateScript={onUpdateProjectScript}
+                    onDeleteScript={onDeleteProjectScript}
+                  />
+                </div>
+              )}
+            </div>
+          </PopoverPopup>
+        </Popover>
+      ) : (
+        <div className="flex shrink-0 items-center justify-end gap-2 @3xl/header-actions:gap-3">
+          {activeProjectScripts && (
+            <ProjectScriptsControl
+              scripts={activeProjectScripts}
+              keybindings={keybindings}
+              preferredScriptId={preferredScriptId}
+              onRunScript={onRunProjectScript}
+              onAddScript={onAddProjectScript}
+              onUpdateScript={onUpdateProjectScript}
+              onDeleteScript={onDeleteProjectScript}
+            />
+          )}
+          {activeProjectName && (
+            <OpenInPicker
+              keybindings={keybindings}
+              availableEditors={availableEditors}
+              openInCwd={openInCwd}
+            />
+          )}
+          {activeProjectName && (
+            <GitActionsControl gitCwd={gitCwd} activeThreadId={activeThreadId} />
+          )}
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Toggle
+                  className="shrink-0"
+                  pressed={terminalOpen}
+                  onPressedChange={onToggleTerminal}
+                  aria-label="Toggle terminal drawer"
+                  variant="outline"
+                  size="xs"
+                  disabled={!terminalAvailable}
+                >
+                  <TerminalSquareIcon className="size-3" />
+                </Toggle>
+              }
+            />
+            <TooltipPopup side="bottom">
+              {!terminalAvailable
+                ? "Terminal is unavailable until this thread has an active project."
+                : terminalToggleShortcutLabel
+                  ? `Toggle terminal drawer (${terminalToggleShortcutLabel})`
+                  : "Toggle terminal drawer"}
+            </TooltipPopup>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Toggle
+                  className="shrink-0"
+                  pressed={diffOpen}
+                  onPressedChange={onToggleDiff}
+                  aria-label="Toggle diff panel"
+                  variant="outline"
+                  size="xs"
+                  disabled={!isGitRepo}
+                >
+                  <DiffIcon className="size-3" />
+                </Toggle>
+              }
+            />
+            <TooltipPopup side="bottom">
+              {!isGitRepo
+                ? "Diff panel is unavailable because this project is not a git repository."
+                : diffToggleShortcutLabel
+                  ? `Toggle diff panel (${diffToggleShortcutLabel})`
+                  : "Toggle diff panel"}
+            </TooltipPopup>
+          </Tooltip>
+        </div>
+      )}
     </div>
   );
 });