From 76067e89810c4cbf554d61afbf23d7b5f72b01a7 Mon Sep 17 00:00:00 2001
From: bunnysayzz <stfuazzo@gmail.com>
Date: Thu, 6 Aug 2026 11:51:16 +0530
Subject: [PATCH] fix: keep code-block toolbar within panel bounds when sidebar
 is narrowed

Code-block header bars (Copy/Run/Enter buttons) overflowed past the panel
edge when the sidebar was narrowed, hiding the action buttons. Flexbox's
default min-width:auto prevented the toolbar's flex children from
shrinking. Allow the title side to shrink and truncate (min-w-0) while
pinning the action buttons (shrink-0), and let the header wrap on very
narrow widths.

Fixes #13085
---
 .../StepContainerPreToolbar/index.test.tsx    | 79 +++++++++++++++++++
 .../StepContainerPreToolbar/index.tsx         |  6 +-
 2 files changed, 82 insertions(+), 3 deletions(-)
 create mode 100644 gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.test.tsx

diff --git a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.test.tsx b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.test.tsx
new file mode 100644
index 00000000000..c30a46465f1
--- /dev/null
+++ b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.test.tsx
@@ -0,0 +1,79 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { StepContainerPreToolbar } from "./index";
+
+vi.mock("../../../context/IdeMessenger", () => {
+  const { createContext } = require("react");
+  return {
+    IdeMessengerContext: createContext({
+      ide: {
+        getCurrentFile: vi.fn().mockResolvedValue(undefined),
+        showToast: vi.fn(),
+        showLines: vi.fn(),
+      },
+      post: vi.fn(),
+    }),
+  };
+});
+
+vi.mock("../../../redux/hooks", () => ({
+  useAppSelector: () => ({}),
+}));
+
+vi.mock("../../../hooks/useWebviewListener", () => ({
+  useWebviewListener: () => {},
+}));
+
+vi.mock("../../../hooks/useIdeMessengerRequest", () => ({
+  useIdeMessengerRequest: () => ({
+    result: undefined,
+    refresh: vi.fn(),
+    isLoading: false,
+  }),
+}));
+
+vi.mock("../../../redux/selectors/selectToolCalls", () => ({
+  selectToolCallById: () => undefined,
+}));
+
+vi.mock("../../../redux/slices/sessionSlice", () => ({
+  selectApplyStateByStreamId: () => undefined,
+  selectApplyStateByToolCallId: () => undefined,
+}));
+
+describe("StepContainerPreToolbar", () => {
+  const baseProps = {
+    codeBlockContent: "console.log('hello')",
+    language: "javascript",
+    codeBlockIndex: 0,
+    isLastCodeblock: true,
+    codeBlockStreamId: "stream-1",
+  };
+
+  it("renders the code block", () => {
+    const { container } = render(
+      <StepContainerPreToolbar {...baseProps}>
+        <pre>console.log(&#39;hello&#39;)</pre>
+      </StepContainerPreToolbar>,
+    );
+    expect(container).toBeTruthy();
+  });
+
+  it("lets the title side shrink and pins the action buttons so the toolbar never overflows the panel", () => {
+    const { container } = render(
+      <StepContainerPreToolbar {...baseProps}>
+        <pre>console.log(&#39;hello&#39;)</pre>
+      </StepContainerPreToolbar>,
+    );
+
+    const titleContainer = [...container.querySelectorAll("div")].find((el) =>
+      el.classList.contains("min-w-0"),
+    );
+    expect(titleContainer).toBeTruthy();
+
+    const actionsContainer = [...container.querySelectorAll("div")].find((el) =>
+      el.classList.contains("shrink-0"),
+    );
+    expect(actionsContainer).toBeTruthy();
+  });
+});
diff --git a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.tsx b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.tsx
index f9d268ccc3f..446b29f2139 100644
--- a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.tsx
+++ b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.tsx
@@ -294,10 +294,10 @@ export function StepContainerPreToolbar({
   return (
     <div className="outline-command-border -outline-offset-0.5 rounded-default bg-editor !my-2 flex min-w-0 flex-col outline outline-1">
       <div
-        className={`find-widget-skip bg-editor sticky -top-2 z-10 m-0 flex items-center justify-between gap-3 px-1.5 py-1 ${isExpanded ? "rounded-t-default border-command-border border-b" : "rounded-default"}`}
+        className={`find-widget-skip bg-editor sticky -top-2 z-10 m-0 flex flex-wrap items-center justify-between gap-x-3 gap-y-1 px-1.5 py-1 ${isExpanded ? "rounded-t-default border-command-border border-b" : "rounded-default"}`}
         style={{ fontSize: `${getFontSize() - 2}px` }}
       >
-        <div className="flex max-w-[50%] flex-row items-center">
+        <div className="flex min-w-0 max-w-[50%] flex-row items-center">
           {toolCallStatusIcon}
           <ChevronDownIcon
             data-testid="toggle-codeblock"
@@ -319,7 +319,7 @@ export function StepContainerPreToolbar({
           )}
         </div>
 
-        <div className="flex items-center gap-2.5">
+        <div className="flex shrink-0 items-center gap-2.5">
           {!isGeneratingCodeBlock && (
             <div className="xs:flex hidden items-center gap-2.5">
               <InsertButton onInsert={onClickInsertAtCursor} />