From cb7546e3233ad99b395176f577a3b7bf30b30c88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Flor=C3=AAncio?= <carlosmflorencio@gmail.com>
Date: Mon, 20 Apr 2026 23:22:34 +0100
Subject: [PATCH] fix(web): prevent kanban topbar search from overlapping right
 buttons (#661)

---
 apps/web/components/kanban-display-dropdown.tsx  | 6 +++---
 apps/web/components/kanban/kanban-header.tsx     | 7 ++++---
 apps/web/components/kanban/mobile-search-bar.tsx | 2 +-
 apps/web/components/kanban/task-search-input.tsx | 2 +-
 apps/web/components/task/quick-chat-button.tsx   | 2 +-
 5 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/apps/web/components/kanban-display-dropdown.tsx b/apps/web/components/kanban-display-dropdown.tsx
index 84c25fd6a8..cae0bc1517 100644
--- a/apps/web/components/kanban-display-dropdown.tsx
+++ b/apps/web/components/kanban-display-dropdown.tsx
@@ -150,9 +150,9 @@ export function KanbanDisplayDropdown() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" data-testid="display-button" className="cursor-pointer">
-          <IconAdjustmentsHorizontal className="h-4 w-4 mr-2" />
-          Display
+        <Button variant="outline" data-testid="display-button" className="cursor-pointer gap-2">
+          <IconAdjustmentsHorizontal className="h-4 w-4" />
+          <span className="hidden 2xl:inline">Display</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-[280px] p-3">
diff --git a/apps/web/components/kanban/kanban-header.tsx b/apps/web/components/kanban/kanban-header.tsx
index a39bb9af4a..37bc80e21b 100644
--- a/apps/web/components/kanban/kanban-header.tsx
+++ b/apps/web/components/kanban/kanban-header.tsx
@@ -211,6 +211,7 @@ function DesktopHeader({
             onChange={onSearchChange}
             placeholder="Search tasks..."
             isLoading={isSearchLoading}
+            className="w-64"
           />
         </div>
       )}
@@ -238,9 +239,9 @@ function DesktopHeader({
         <HealthIndicatorButton hasIssues={showHealthIndicator} onClick={onOpenHealthDialog} />
         <KanbanDisplayDropdown />
         <Link href="/settings" className="cursor-pointer">
-          <Button variant="outline" className="cursor-pointer">
-            <IconSettings className="h-4 w-4 mr-2" />
-            Settings
+          <Button variant="outline" className="cursor-pointer gap-2">
+            <IconSettings className="h-4 w-4" />
+            <span className="hidden 2xl:inline">Settings</span>
           </Button>
         </Link>
       </div>
diff --git a/apps/web/components/kanban/mobile-search-bar.tsx b/apps/web/components/kanban/mobile-search-bar.tsx
index 8341cc1ae9..0e5c3a2328 100644
--- a/apps/web/components/kanban/mobile-search-bar.tsx
+++ b/apps/web/components/kanban/mobile-search-bar.tsx
@@ -14,7 +14,7 @@ export function MobileSearchBar({ searchQuery, onSearchChange }: MobileSearchBar
         value={searchQuery}
         onChange={onSearchChange}
         placeholder="Search tasks..."
-        className="w-full [&_input]:w-full"
+        className="w-full"
       />
     </div>
   );
diff --git a/apps/web/components/kanban/task-search-input.tsx b/apps/web/components/kanban/task-search-input.tsx
index ea70287597..271bdd4362 100644
--- a/apps/web/components/kanban/task-search-input.tsx
+++ b/apps/web/components/kanban/task-search-input.tsx
@@ -77,7 +77,7 @@ export function TaskSearchInput({
         value={localValue}
         onChange={handleChange}
         placeholder={placeholder}
-        className="pl-8 pr-8 w-64 border border-border"
+        className="pl-8 pr-8 w-full border border-border"
       />
       {localValue && !isLoading && (
         <button
diff --git a/apps/web/components/task/quick-chat-button.tsx b/apps/web/components/task/quick-chat-button.tsx
index 36467a5932..fff34d880e 100644
--- a/apps/web/components/task/quick-chat-button.tsx
+++ b/apps/web/components/task/quick-chat-button.tsx
@@ -18,7 +18,7 @@ export function QuickChatButton({ workspaceId }: { workspaceId?: string | null }
   return (
     <KeyboardShortcutTooltip shortcut={quickChatShortcut} description="Quick Chat">
       <Button
-        size="icon-sm"
+        size="icon"
         variant="outline"
         className="cursor-pointer"
         onClick={handleOpenQuickChat}