From 5b26dbf80de4073caacf6d978792efc3e59e6d98 Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Fri, 12 Jun 2026 12:47:43 -0700
Subject: [PATCH] design(chat): fix clipping of collapse button by adjusting
 overflow on structural chat container

---
 .../components/vibn-chat/chat-panel.tsx       | 91 ++++++++++++++++++-
 1 file changed, 89 insertions(+), 2 deletions(-)

diff --git a/vibn-frontend/components/vibn-chat/chat-panel.tsx b/vibn-frontend/components/vibn-chat/chat-panel.tsx
index 3634f6b..6f7c8a2 100644
--- a/vibn-frontend/components/vibn-chat/chat-panel.tsx
+++ b/vibn-frontend/components/vibn-chat/chat-panel.tsx
@@ -1026,6 +1026,18 @@ export function ChatPanel({
   );
   const [showThreads, setShowThreads] = useState(false);
   const [mcpToken, setMcpToken] = useState<string | null>(null);
+  const [isChatMinimized, setIsChatMinimized] = useState<boolean>(() => {
+    if (typeof window === "undefined") return false;
+    return !window.location.pathname.includes("/preview");
+  });
+
+  // Auto-minimize when navigating to dashboard, auto-open when navigating to preview
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setIsChatMinimized(!window.location.pathname.includes("/preview"));
+    }
+  }, [pathname]);
+
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   // AbortController for the in-flight /api/chat fetch. Lives in a ref
@@ -2497,7 +2509,7 @@ export function ChatPanel({
             >
               <div
                 style={{
-                  width: 380,
+                  width: isChatMinimized ? 52 : 380,
                   flexShrink: 0,
                   borderRight: "1px solid #e8e4dc",
                   background: "#fff",
@@ -2505,9 +2517,84 @@ export function ChatPanel({
                   flexDirection: "column",
                   minHeight: 0,
                   minWidth: 0,
+                  transition: "width 0.2s ease-in-out",
+                  overflow: "visible", // Changed from hidden to visible so the collapse button can hang over the edge
+                  position: "relative",
+                  zIndex: 40,
                 }}
               >
-                {structuralChatBody}
+                {isChatMinimized ? (
+                  <div
+                    style={{
+                      flex: 1,
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      paddingTop: 16,
+                    }}
+                  >
+                    <button
+                      onClick={() => setIsChatMinimized(false)}
+                      style={{
+                        background: "#f4f4f5",
+                        border: "1px solid #e4e4e7",
+                        width: 32,
+                        height: 32,
+                        borderRadius: 8,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        cursor: "pointer",
+                        color: "#52525b",
+                      }}
+                      title="Open Vibn AI Chat"
+                    >
+                      <MessageSquare size={16} />
+                    </button>
+                  </div>
+                ) : (
+                  <div
+                    style={{
+                      flex: 1,
+                      display: "flex",
+                      flexDirection: "column",
+                      overflow: "hidden",
+                    }}
+                  >
+                    <div
+                      style={{
+                        position: "relative",
+                        width: "100%",
+                        height: 0,
+                      }}
+                    >
+                      <button
+                        onClick={() => setIsChatMinimized(true)}
+                        style={{
+                          position: "absolute",
+                          zIndex: 50,
+                          right: -12,
+                          top: 12,
+                          background: "#fff",
+                          border: "1px solid #e8e4dc",
+                          width: 24,
+                          height: 24,
+                          borderRadius: "50%",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          cursor: "pointer",
+                          color: "#a1a1aa",
+                          boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
+                        }}
+                        title="Minimize Chat"
+                      >
+                        <ChevronRight size={14} />
+                      </button>
+                    </div>
+                    {structuralChatBody}
+                  </div>
+                )}
               </div>
               <div
                 key={pathname}