fix: keep code-block toolbar within panel bounds when sidebar is narrowed

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();
+  });
+});

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} />