From 607201be79aa6fd5b490f4051815bedca8fc6b19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Almeida?=
 <57680069+zeval@users.noreply.github.com>
Date: Sun, 7 Jun 2026 13:00:19 +0100
Subject: [PATCH] fix(web): tighten dockview topbar button sizing (#1290)

* fix(web): tighten dockview topbar button sizing

* fix(web): keep editor button focus ring inside clipped container
---
 apps/web/components/task/editors-menu.tsx |  6 +++---
 apps/web/components/task/task-top-bar.tsx | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/web/components/task/editors-menu.tsx b/apps/web/components/task/editors-menu.tsx
index 78ba6412ae..5989337378 100644
--- a/apps/web/components/task/editors-menu.tsx
+++ b/apps/web/components/task/editors-menu.tsx
@@ -45,13 +45,13 @@ export function EditorsMenu({ activeSessionId }: EditorsMenuProps) {
   }, [defaultEditorId, enabledEditors]);
 
   return (
-    <div className="inline-flex rounded-md border border-border overflow-hidden">
+    <div className="inline-flex h-7 rounded-md border border-border overflow-hidden">
       <Tooltip>
         <TooltipTrigger asChild>
           <Button
             size="sm"
             variant="outline"
-            className="rounded-none border-0 cursor-pointer px-2"
+            className="rounded-none border-0 cursor-pointer px-2 focus-visible:ring-inset"
             onClick={() => {
               if (!resolvedEditorId) return;
               void openEditor.open({ editorId: resolvedEditorId });
@@ -74,7 +74,7 @@ export function EditorsMenu({ activeSessionId }: EditorsMenuProps) {
           <Button
             size="sm"
             variant="outline"
-            className="rounded-none border-0 border-l px-2 cursor-pointer"
+            className="rounded-none border-0 border-l px-2 cursor-pointer focus-visible:ring-inset"
             disabled={!activeSessionId || enabledEditors.length === 0}
           >
             <IconChevronDown className="h-4 w-4" />
diff --git a/apps/web/components/task/task-top-bar.tsx b/apps/web/components/task/task-top-bar.tsx
index 920f134283..a375824d97 100644
--- a/apps/web/components/task/task-top-bar.tsx
+++ b/apps/web/components/task/task-top-bar.tsx
@@ -207,7 +207,7 @@ function DebugOverlayToggle({
         <Button
           size="sm"
           variant="outline"
-          className="h-8 cursor-pointer px-2"
+          className="h-7 cursor-pointer px-2"
           onClick={onToggleDebugOverlay}
           aria-label={label}
         >
@@ -237,7 +237,7 @@ function AttentionStatusGroup({
   taskTitle?: string;
 }) {
   return (
-    <TopbarCluster label="Task status and attention" className="[&_button]:h-8 [&_button]:text-xs">
+    <TopbarCluster label="Task status and attention" className="[&_button]:h-7 [&_button]:text-xs">
       <DocumentControls activeSessionId={activeSessionId ?? null} />
       {!isArchived && (
         <>
@@ -272,7 +272,7 @@ function TopbarToolsGroup({
   const showDebugToggle = isDebugUI() && onToggleDebugOverlay;
 
   return (
-    <TopbarCluster label="Task tools" className="[&_button]:h-8 [&_button]:text-xs">
+    <TopbarCluster label="Task tools" className="[&_button]:h-7 [&_button]:text-xs">
       {!isArchived && (
         <>
           <LayoutPresetSelector />
@@ -318,8 +318,8 @@ function TopBarRight({
   return (
     <div className="flex items-center justify-self-end gap-2 [&_button]:whitespace-nowrap">
       {officeTaskHref && (
-        <TopbarCluster label="Open in office view" className="[&_a]:h-8 [&_a]:text-xs">
-          <Button asChild size="sm" variant="outline" className="h-8 cursor-pointer px-2">
+        <TopbarCluster label="Open in office view" className="[&_a]:h-7 [&_a]:text-xs">
+          <Button asChild size="sm" variant="outline" className="h-7 cursor-pointer px-2">
             <Link href={officeTaskHref}>Open in office view</Link>
           </Button>
         </TopbarCluster>