make hella smooth

src/components/thread/history/index.tsx

@@ -12,7 +12,6 @@ import {
   SheetTitle,
 } from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
-import { cn } from "@/lib/utils";
 import { PanelRightOpen } from "lucide-react";
 import { useMediaQuery } from "@/hooks/useMediaQuery";
 

src/components/thread/index.tsx

@@ -211,7 +211,7 @@ export function Thread() {
         }
       >
         {!chatStarted && (
-          <div className="flex items-center justify-between gap-3 p-2 pl-4 z-10 relative">
+          <div className="absolute top-0 left-0 w-full flex items-center justify-between gap-3 p-2 pl-4 z-10">
             {(!chatHistoryOpen || !isLargeScreen) && (
               <Button
                 className="hover:bg-gray-100"
@@ -225,7 +225,8 @@ export function Thread() {
         )}
         {chatStarted && (
           <div className="flex items-center justify-between gap-3 p-2 pl-4 z-10 relative">
-            <div className="flex items-center justify-start gap-2">
+            <div className="flex items-center justify-start gap-2 relative">
+              <div className="absolute left-0 z-10">
                 {(!chatHistoryOpen || !isLargeScreen) && (
                   <Button
                     className="hover:bg-gray-100"
@@ -235,15 +236,24 @@ export function Thread() {
                     <PanelRightOpen />
                   </Button>
                 )}
-              <button
+              </div>
+              <motion.button
                 className="flex gap-2 items-center cursor-pointer"
                 onClick={() => setThreadId(null)}
+                animate={{
+                  marginLeft: !chatHistoryOpen ? 48 : 0,
+                }}
+                transition={{
+                  type: "spring",
+                  stiffness: 300,
+                  damping: 30,
+                }}
               >
                 <LangGraphLogoSVG width={32} height={32} />
                 <span className="text-xl font-semibold tracking-tight">
                   LangGraph Chat
                 </span>
-              </button>
+              </motion.button>
             </div>
 
             <TooltipIconButton