From 35a4a1589829529fd798aa8350d5529ea4660630 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sat, 28 Feb 2026 15:33:15 +0800
Subject: [PATCH] fix: restore flex-1 on toolbarRef to fix compact mode exit

After moving ProxyToggle/FailoverToggle outside toolbarRef, the flex-1
class was accidentally left only on the outer wrapper. Without flex-1,
toolbarRef.clientWidth reflects content width instead of available space,
causing useAutoCompact's exit condition to never trigger.
---
 src/App.tsx | 479 ++++++++++++++++++++++++++--------------------------
 1 file changed, 244 insertions(+), 235 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f18164b76..8207a9cce 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -964,252 +964,261 @@ function App() {
             )}
           </div>
 
-          <div
-            ref={toolbarRef}
-            className="flex flex-1 min-w-0 overflow-x-hidden justify-end items-center"
-          >
-            <div
-              className="flex shrink-0 items-center gap-1.5"
-              style={{ WebkitAppRegion: "no-drag" } as any}
-            >
-              {currentView === "prompts" && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => promptPanelRef.current?.openAdd()}
-                  className="hover:bg-black/5 dark:hover:bg-white/5"
+          <div className="flex flex-1 min-w-0 items-center justify-end gap-1.5">
+            {currentView === "providers" &&
+              activeApp !== "opencode" &&
+              activeApp !== "openclaw" &&
+              settingsData?.enableLocalProxy && (
+                <div
+                  className="flex shrink-0 items-center gap-1.5"
+                  style={{ WebkitAppRegion: "no-drag" } as any}
                 >
-                  <Plus className="w-4 h-4 mr-2" />
-                  {t("prompts.add")}
-                </Button>
-              )}
-              {currentView === "mcp" && (
-                <>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => mcpPanelRef.current?.openImport()}
-                    className="hover:bg-black/5 dark:hover:bg-white/5"
+                  <ProxyToggle activeApp={activeApp} />
+                  <div
+                    className={cn(
+                      "transition-all duration-300 ease-in-out overflow-hidden",
+                      isCurrentAppTakeoverActive
+                        ? "opacity-100 max-w-[100px] scale-100"
+                        : "opacity-0 max-w-0 scale-75 pointer-events-none",
+                    )}
                   >
-                    <Download className="w-4 h-4 mr-2" />
-                    {t("mcp.importExisting")}
-                  </Button>
+                    <FailoverToggle activeApp={activeApp} />
+                  </div>
+                </div>
+              )}
+            <div
+              ref={toolbarRef}
+              className="flex flex-1 min-w-0 overflow-x-hidden justify-end items-center"
+            >
+              <div
+                className="flex shrink-0 items-center gap-1.5"
+                style={{ WebkitAppRegion: "no-drag" } as any}
+              >
+                {currentView === "prompts" && (
                   <Button
                     variant="ghost"
                     size="sm"
-                    onClick={() => mcpPanelRef.current?.openAdd()}
+                    onClick={() => promptPanelRef.current?.openAdd()}
                     className="hover:bg-black/5 dark:hover:bg-white/5"
                   >
                     <Plus className="w-4 h-4 mr-2" />
-                    {t("mcp.addMcp")}
+                    {t("prompts.add")}
                   </Button>
-                </>
-              )}
-              {currentView === "skills" && (
-                <>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() =>
-                      unifiedSkillsPanelRef.current?.openInstallFromZip()
-                    }
-                    className="hover:bg-black/5 dark:hover:bg-white/5"
-                  >
-                    <FolderArchive className="w-4 h-4 mr-2" />
-                    {t("skills.installFromZip.button")}
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => unifiedSkillsPanelRef.current?.openImport()}
-                    className="hover:bg-black/5 dark:hover:bg-white/5"
-                  >
-                    <Download className="w-4 h-4 mr-2" />
-                    {t("skills.import")}
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => setCurrentView("skillsDiscovery")}
-                    className="hover:bg-black/5 dark:hover:bg-white/5"
-                  >
-                    <Search className="w-4 h-4 mr-2" />
-                    {t("skills.discover")}
-                  </Button>
-                </>
-              )}
-              {currentView === "skillsDiscovery" && (
-                <>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => skillsPageRef.current?.refresh()}
-                    className="hover:bg-black/5 dark:hover:bg-white/5"
-                  >
-                    <RefreshCw className="w-4 h-4 mr-2" />
-                    {t("skills.refresh")}
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => skillsPageRef.current?.openRepoManager()}
-                    className="hover:bg-black/5 dark:hover:bg-white/5"
-                  >
-                    <Settings className="w-4 h-4 mr-2" />
-                    {t("skills.repoManager")}
-                  </Button>
-                </>
-              )}
-              {currentView === "providers" && (
-                <>
-                  {activeApp !== "opencode" &&
-                    activeApp !== "openclaw" &&
-                    settingsData?.enableLocalProxy && (
-                      <>
-                        <ProxyToggle activeApp={activeApp} />
-                        <div
-                          className={cn(
-                            "transition-all duration-300 ease-in-out overflow-hidden",
-                            isCurrentAppTakeoverActive
-                              ? "opacity-100 max-w-[100px] scale-100"
-                              : "opacity-0 max-w-0 scale-75 pointer-events-none",
-                          )}
+                )}
+                {currentView === "mcp" && (
+                  <>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => mcpPanelRef.current?.openImport()}
+                      className="hover:bg-black/5 dark:hover:bg-white/5"
+                    >
+                      <Download className="w-4 h-4 mr-2" />
+                      {t("mcp.importExisting")}
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => mcpPanelRef.current?.openAdd()}
+                      className="hover:bg-black/5 dark:hover:bg-white/5"
+                    >
+                      <Plus className="w-4 h-4 mr-2" />
+                      {t("mcp.addMcp")}
+                    </Button>
+                  </>
+                )}
+                {currentView === "skills" && (
+                  <>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() =>
+                        unifiedSkillsPanelRef.current?.openInstallFromZip()
+                      }
+                      className="hover:bg-black/5 dark:hover:bg-white/5"
+                    >
+                      <FolderArchive className="w-4 h-4 mr-2" />
+                      {t("skills.installFromZip.button")}
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() =>
+                        unifiedSkillsPanelRef.current?.openImport()
+                      }
+                      className="hover:bg-black/5 dark:hover:bg-white/5"
+                    >
+                      <Download className="w-4 h-4 mr-2" />
+                      {t("skills.import")}
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setCurrentView("skillsDiscovery")}
+                      className="hover:bg-black/5 dark:hover:bg-white/5"
+                    >
+                      <Search className="w-4 h-4 mr-2" />
+                      {t("skills.discover")}
+                    </Button>
+                  </>
+                )}
+                {currentView === "skillsDiscovery" && (
+                  <>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => skillsPageRef.current?.refresh()}
+                      className="hover:bg-black/5 dark:hover:bg-white/5"
+                    >
+                      <RefreshCw className="w-4 h-4 mr-2" />
+                      {t("skills.refresh")}
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => skillsPageRef.current?.openRepoManager()}
+                      className="hover:bg-black/5 dark:hover:bg-white/5"
+                    >
+                      <Settings className="w-4 h-4 mr-2" />
+                      {t("skills.repoManager")}
+                    </Button>
+                  </>
+                )}
+                {currentView === "providers" && (
+                  <>
+                    <AppSwitcher
+                      activeApp={activeApp}
+                      onSwitch={setActiveApp}
+                      visibleApps={visibleApps}
+                      compact={isToolbarCompact}
+                    />
+
+                    <div className="flex items-center gap-1 p-1 bg-muted rounded-xl">
+                      <AnimatePresence mode="wait">
+                        <motion.div
+                          key={
+                            activeApp === "openclaw" ? "openclaw" : "default"
+                          }
+                          className="flex items-center gap-1"
+                          initial={{ opacity: 0 }}
+                          animate={{ opacity: 1 }}
+                          exit={{ opacity: 0 }}
+                          transition={{ duration: 0.15 }}
                         >
-                          <FailoverToggle activeApp={activeApp} />
-                        </div>
-                      </>
-                    )}
+                          {activeApp === "openclaw" ? (
+                            <>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setCurrentView("workspace")}
+                                className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                                title={t("workspace.manage")}
+                              >
+                                <FolderOpen className="w-4 h-4" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setCurrentView("openclawEnv")}
+                                className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                                title={t("openclaw.env.title")}
+                              >
+                                <KeyRound className="w-4 h-4" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setCurrentView("openclawTools")}
+                                className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                                title={t("openclaw.tools.title")}
+                              >
+                                <Shield className="w-4 h-4" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setCurrentView("openclawAgents")}
+                                className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                                title={t("openclaw.agents.title")}
+                              >
+                                <Cpu className="w-4 h-4" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setCurrentView("sessions")}
+                                className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                                title={t("sessionManager.title")}
+                              >
+                                <History className="w-4 h-4" />
+                              </Button>
+                            </>
+                          ) : (
+                            <>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setCurrentView("skills")}
+                                className={cn(
+                                  "text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5",
+                                  "transition-all duration-200 ease-in-out overflow-hidden",
+                                  hasSkillsSupport
+                                    ? "opacity-100 w-8 scale-100 px-2"
+                                    : "opacity-0 w-0 scale-75 pointer-events-none px-0 -ml-1",
+                                )}
+                                title={t("skills.manage")}
+                              >
+                                <Wrench className="flex-shrink-0 w-4 h-4" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setCurrentView("prompts")}
+                                className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                                title={t("prompts.manage")}
+                              >
+                                <Book className="w-4 h-4" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setCurrentView("sessions")}
+                                className={cn(
+                                  "text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5",
+                                  "transition-all duration-200 ease-in-out overflow-hidden",
+                                  hasSessionSupport
+                                    ? "opacity-100 w-8 scale-100 px-2"
+                                    : "opacity-0 w-0 scale-75 pointer-events-none px-0 -ml-1",
+                                )}
+                                title={t("sessionManager.title")}
+                              >
+                                <History className="flex-shrink-0 w-4 h-4" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setCurrentView("mcp")}
+                                className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                                title={t("mcp.title")}
+                              >
+                                <McpIcon size={16} />
+                              </Button>
+                            </>
+                          )}
+                        </motion.div>
+                      </AnimatePresence>
+                    </div>
 
-                  <AppSwitcher
-                    activeApp={activeApp}
-                    onSwitch={setActiveApp}
-                    visibleApps={visibleApps}
-                    compact={isToolbarCompact}
-                  />
-
-                  <div className="flex items-center gap-1 p-1 bg-muted rounded-xl">
-                    <AnimatePresence mode="wait">
-                      <motion.div
-                        key={activeApp === "openclaw" ? "openclaw" : "default"}
-                        className="flex items-center gap-1"
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        exit={{ opacity: 0 }}
-                        transition={{ duration: 0.15 }}
-                      >
-                        {activeApp === "openclaw" ? (
-                          <>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => setCurrentView("workspace")}
-                              className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
-                              title={t("workspace.manage")}
-                            >
-                              <FolderOpen className="w-4 h-4" />
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => setCurrentView("openclawEnv")}
-                              className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
-                              title={t("openclaw.env.title")}
-                            >
-                              <KeyRound className="w-4 h-4" />
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => setCurrentView("openclawTools")}
-                              className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
-                              title={t("openclaw.tools.title")}
-                            >
-                              <Shield className="w-4 h-4" />
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => setCurrentView("openclawAgents")}
-                              className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
-                              title={t("openclaw.agents.title")}
-                            >
-                              <Cpu className="w-4 h-4" />
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => setCurrentView("sessions")}
-                              className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
-                              title={t("sessionManager.title")}
-                            >
-                              <History className="w-4 h-4" />
-                            </Button>
-                          </>
-                        ) : (
-                          <>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => setCurrentView("skills")}
-                              className={cn(
-                                "text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5",
-                                "transition-all duration-200 ease-in-out overflow-hidden",
-                                hasSkillsSupport
-                                  ? "opacity-100 w-8 scale-100 px-2"
-                                  : "opacity-0 w-0 scale-75 pointer-events-none px-0 -ml-1",
-                              )}
-                              title={t("skills.manage")}
-                            >
-                              <Wrench className="flex-shrink-0 w-4 h-4" />
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => setCurrentView("prompts")}
-                              className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
-                              title={t("prompts.manage")}
-                            >
-                              <Book className="w-4 h-4" />
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => setCurrentView("sessions")}
-                              className={cn(
-                                "text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5",
-                                "transition-all duration-200 ease-in-out overflow-hidden",
-                                hasSessionSupport
-                                  ? "opacity-100 w-8 scale-100 px-2"
-                                  : "opacity-0 w-0 scale-75 pointer-events-none px-0 -ml-1",
-                              )}
-                              title={t("sessionManager.title")}
-                            >
-                              <History className="flex-shrink-0 w-4 h-4" />
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => setCurrentView("mcp")}
-                              className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
-                              title={t("mcp.title")}
-                            >
-                              <McpIcon size={16} />
-                            </Button>
-                          </>
-                        )}
-                      </motion.div>
-                    </AnimatePresence>
-                  </div>
-
-                  <Button
-                    onClick={() => setIsAddOpen(true)}
-                    size="icon"
-                    className={`ml-2 ${addActionButtonClass}`}
-                  >
-                    <Plus className="w-5 h-5" />
-                  </Button>
-                </>
-              )}
+                    <Button
+                      onClick={() => setIsAddOpen(true)}
+                      size="icon"
+                      className={`ml-2 ${addActionButtonClass}`}
+                    >
+                      <Plus className="w-5 h-5" />
+                    </Button>
+                  </>
+                )}
+              </div>
             </div>
           </div>
         </div>