From 43d6a2bf7b6ba79ac281681e89eb92fb604dfdc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Flor=C3=AAncio?= <carlosmflorencio@gmail.com>
Date: Sat, 23 May 2026 10:52:45 +0100
Subject: [PATCH] feat(editors): truncate file path in editor toolbar with
 hover-scroll (#1029)

---
 .../editors/codemirror/codemirror-code-editor.tsx        | 9 ++++++---
 .../components/editors/monaco/monaco-editor-toolbar.tsx  | 9 ++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/apps/web/components/editors/codemirror/codemirror-code-editor.tsx b/apps/web/components/editors/codemirror/codemirror-code-editor.tsx
index a4a340c2dc..88d7388da4 100644
--- a/apps/web/components/editors/codemirror/codemirror-code-editor.tsx
+++ b/apps/web/components/editors/codemirror/codemirror-code-editor.tsx
@@ -3,6 +3,7 @@
 import { useRef } from "react";
 import CodeMirror, { type ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import { Button } from "@kandev/ui/button";
+import { ScrollOnOverflow } from "@kandev/ui/scroll-on-overflow";
 import {
   IconDeviceFloppy,
   IconLoader2,
@@ -228,10 +229,12 @@ function CodeMirrorToolbar({
   return (
     <PanelHeaderBarSplit
       left={
-        <div className="flex items-center gap-2 text-xs text-muted-foreground">
-          <span className="font-mono">{toRelativePath(path, worktreePath)}</span>
+        <div className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
+          <ScrollOnOverflow className="min-w-0 font-mono">
+            {toRelativePath(path, worktreePath)}
+          </ScrollOnOverflow>
           {isDirty && diffStats && (
-            <span className="text-xs text-yellow-500">
+            <span className="shrink-0 text-xs text-yellow-500">
               {formatDiffStats(diffStats.additions, diffStats.deletions)}
             </span>
           )}
diff --git a/apps/web/components/editors/monaco/monaco-editor-toolbar.tsx b/apps/web/components/editors/monaco/monaco-editor-toolbar.tsx
index db111462a2..8e4cd3bf45 100644
--- a/apps/web/components/editors/monaco/monaco-editor-toolbar.tsx
+++ b/apps/web/components/editors/monaco/monaco-editor-toolbar.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@kandev/ui/button";
+import { ScrollOnOverflow } from "@kandev/ui/scroll-on-overflow";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@kandev/ui/tooltip";
 import {
   IconDeviceFloppy,
@@ -68,10 +69,12 @@ function ToolbarLeft({
   diffStats: { additions: number; deletions: number } | null;
 }) {
   return (
-    <div className="flex items-center gap-2 text-xs text-muted-foreground">
-      <span className="font-mono">{toRelativePath(path, worktreePath)}</span>
+    <div className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
+      <ScrollOnOverflow className="min-w-0 font-mono">
+        {toRelativePath(path, worktreePath)}
+      </ScrollOnOverflow>
       {isDirty && diffStats && (
-        <span className="text-xs text-yellow-500">
+        <span className="shrink-0 text-xs text-yellow-500">
           {formatDiffStats(diffStats.additions, diffStats.deletions)}
         </span>
       )}