Columns are now resizable

src/Home.tsx

-import { useState, useEffect, useContext, act } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useSearchParams } from "react-router-dom";
 import { fr } from "@codegouvfr/react-dsfr";
 import { cx } from "@codegouvfr/react-dsfr/tools/cx";
@@ -12,6 +12,9 @@ import { useAuthContext } from "@/components/AuthProvider";
 import { TabComponent } from "@/components/TabComponent";
 import { SimpleChat } from "./components/SimpleChat";
 
+/**
+ * Component that contains two columns that can be resized dynamically
+ */
 export function Home({
   onFullScreen,
   isFullScreen,
@@ -34,6 +37,9 @@ export function Home({
   const [searchParams, setSearchParams] = useSearchParams();
   const activeTab = searchParams.get("tab") || "documents";
 
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [leftWidth, setLeftWidth] = useState(30);
+
   useEffect(() => {
     if (currentDocument) {
       setCurrentDocument(null);
@@ -55,6 +61,26 @@ export function Home({
     setSearchParams(searchParams);
   };
 
+  const handleMouseDown = (e: React.MouseEvent) => {
+    const startX = e.clientX;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!containerRef.current) return;
+      const containerWidth = containerRef.current.offsetWidth;
+      const newLeftWidth =
+        ((e.clientX - containerRef.current.offsetLeft) / containerWidth) * 100;
+      setLeftWidth(Math.min(Math.max(newLeftWidth, 5), 95)); // min 5%, max 95%
+    };
+
+    const stopDrag = () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", stopDrag);
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", stopDrag);
+  };
+
   if (!currentCollection) {
     return (
       <div className={cx(fr.cx("fr-p-32v"))}>
@@ -77,12 +103,8 @@ export function Home({
           inaccessible. Veuillez nous excusez pour la gêne occasionnée.
         </Highlight>
       )}
-      <div
-        className={
-          isFullScreen ? fr.cx("fr-grid-row", "fr-ml-4v") : fr.cx("fr-grid-row")
-        }
-      >
-        <div className={fr.cx("fr-col-4")}>
+      <div ref={containerRef} style={{ display: "flex", width: "100%" }}>
+        <div style={{ width: `${leftWidth}%` }}>
           <TabComponent
             onTabChange={handleTabChange}
             tabs={[
@@ -128,7 +150,19 @@ export function Home({
             ]}
           />
         </div>
-        <div className={fr.cx("fr-col-8")}>
+        <div
+          onMouseDown={handleMouseDown}
+          style={{
+            width: "5px",
+            cursor: "col-resize",
+            background: fr.colors.decisions.background.default.grey.default,
+            zIndex: 1,
+            transition: "background 0.2s",
+          }}
+          onMouseEnter={(e) => (e.currentTarget.style.background = fr.colors.decisions.background.default.grey.active)}
+          onMouseLeave={(e) => (e.currentTarget.style.background = fr.colors.decisions.background.default.grey.default)}
+        />
+        <div style={{ flex: 1 }}>
           <div className="PDF-viewer">
             {currentDocument ? (
               <PdfViewerComponent