Fix plan composer layout and sidebar flex shrink behavior

- add `min-w-0` to chat/flex containers to prevent composer/sidebar overflow - move `BranchToolbar` into the chat column so layout stays aligned with plan sidebar - extract sidebar inset base classes to shared logic and add a regression test for `min-w-0`

Julius Marminge committed 8 months ago

Commit e9ffd571 parent 24122b14 files · +23 −11Browse files

Unified · Split

4 files

apps/web/src/components/ChatView.tsx +10 −10
apps/web/src/components/ui/sidebar.logic.ts +2 −0
apps/web/src/components/ui/sidebar.test.tsx +9 −0
apps/web/src/components/ui/sidebar.tsx +2 −1

apps/web/src/components/ChatView.tsx+10−10

         onDismiss={() => setThreadError(activeThread.id, null)}
       />
       {/* Main content area with optional plan sidebar */}
-      <div className="flex min-h-0 flex-1">
+      <div className="flex min-h-0 min-w-0 flex-1">
         {/* Chat column */}
         <div className="flex min-h-0 min-w-0 flex-1 flex-col">
         </form>
       </div>
+      {isGitRepo && (
+        <BranchToolbar
+          threadId={activeThread.id}
+          onEnvModeChange={onEnvModeChange}
+          envLocked={envLocked}
+          onComposerFocusRequest={scheduleComposerFocus}
+        />
+      )}
         </div>{/* end chat column */}
         {/* Plan sidebar */}
         ) : null}
       </div>{/* end horizontal flex container */}
-      {isGitRepo && (
-        <BranchToolbar
-          threadId={activeThread.id}
-          onEnvModeChange={onEnvModeChange}
-          envLocked={envLocked}
-          onComposerFocusRequest={scheduleComposerFocus}
-        />
-      )}
       {(() => {
         if (!terminalState.terminalOpen || !activeProject) {
           return null;

apps/web/src/components/ui/sidebar.logic.ts+2−0

@@ -0,0 +1,2 @@
	1	export const SIDEBAR_INSET_BASE_CLASSNAME =
	2	"relative flex min-w-0 w-full flex-1 flex-col bg-background";

apps/web/src/components/ui/sidebar.test.tsx+9−0

@@ -0,0 +1,9 @@
	1	import { describe, expect, it } from "vitest";
	2
	3	import { SIDEBAR_INSET_BASE_CLASSNAME } from "./sidebar.logic";
	4
	5	describe("SidebarInset", () => {
	6	it("stays shrinkable inside flex layouts", () => {
	7	expect(SIDEBAR_INSET_BASE_CLASSNAME).toContain("min-w-0");
	8	});
	9	});

apps/web/src/components/ui/sidebar.tsx+2−1

 import { Skeleton } from "~/components/ui/skeleton";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "~/components/ui/tooltip";
 import { useMediaQuery } from "~/hooks/useMediaQuery";
+import { SIDEBAR_INSET_BASE_CLASSNAME } from "./sidebar.logic";
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
   return (
     <main
       className={cn(
-        "relative flex w-full flex-1 flex-col bg-background",
+        SIDEBAR_INSET_BASE_CLASSNAME,
         "md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm/5",
         className,
       )}