From 1a500674941d6669b1c3b617cdead71c6b7be8c1 Mon Sep 17 00:00:00 2001
From: alex <alex.xinliu@outlook.com>
Date: Sun, 1 Nov 2026 22:26:21 +0800
Subject: [PATCH] Stop the Explorer label overlapping the File button in narrow
 sidebars

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/app/components/WorkspaceSidebar.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/components/WorkspaceSidebar.tsx b/apps/web/src/app/components/WorkspaceSidebar.tsx
index 41932c6..bff5331 100644
--- a/apps/web/src/app/components/WorkspaceSidebar.tsx
+++ b/apps/web/src/app/components/WorkspaceSidebar.tsx
@@ -869,12 +869,12 @@ export function WorkspaceSidebar({
       onClick={() => setContextMenu(null)}
     >
       {/* Sidebar Header */}
-      <div className="flex h-10 items-center gap-2 px-4">
+      <div className="@container flex h-10 items-center gap-2 px-4">
         <div className="flex min-w-0 flex-col items-start">
-          <span className="text-[11px] font-semibold tracking-[0.8px] text-[var(--text2)]">{t.files.explorer}</span>
+          <span className="max-w-full truncate text-[11px] font-semibold tracking-[0.8px] text-[var(--text2)]">{t.files.explorer}</span>
         </div>
         <div className="flex-1" />
-        <div className="flex items-center gap-1">
+        <div className="flex shrink-0 items-center gap-1">
           <button
             type="button"
             className="flex h-7 items-center gap-1 rounded-lg px-2 text-[var(--text3)] transition hover:bg-[var(--hover)] hover:text-[var(--text2)]"
@@ -883,7 +883,7 @@ export function WorkspaceSidebar({
             onClick={() => onCreateDocument(createTargetParentId)}
           >
             <FilePlus size={16} />
-            <span className="text-[11px] font-medium">{t.files.file}</span>
+            <span className="text-[11px] font-medium @max-[12rem]:hidden">{t.files.file}</span>
           </button>
           <button
             type="button"
@@ -893,7 +893,7 @@ export function WorkspaceSidebar({
             onClick={() => onCreateFolder(createTargetParentId)}
           >
             <FolderPlus size={16} />
-            <span className="text-[11px] font-medium">{t.files.folder}</span>
+            <span className="text-[11px] font-medium @max-[12rem]:hidden">{t.files.folder}</span>
           </button>
         </div>
       </div>