make chatbot component wrap to the edge

reorproject · Nov 26, 2023 · 23c9509 · 23c9509
1 parent 151c6d5
commit 23c9509
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
@@ -79,7 +79,7 @@ const ChatWithLLM: React.FC = () => {
   };
 
   return (
-    <div className="flex flex-col max-w-md mx-auto border shadow-lg overflow-hidden">
+    <div className="flex flex-col w-full h-full mx-auto border shadow-lg overflow-hidden">
       <div className="flex-1 overflow-auto p-4 bg-white">
         {loading && <p className="text-center text-gray-500">Loading...</p>}
         <div className="space-y-2">

diff --git a/src/components/FileEditorContainer.tsx b/src/components/FileEditorContainer.tsx
@@ -38,24 +38,25 @@ const FileEditorContainer: React.FC<FileEditorContainerProps> = ({}) => {
           />
         </div>
         {selectedFilePath && (
-          <div className="flex" style={{ width: "calc(100vw - 300px)" }}>
+          <div className="flex flex-grow relative">
             <div className="w-2/3 overflow-auto">
               <FileEditor
                 filePath={selectedFilePath}
-                // content={editorContent}
                 setContentInParent={setEditorContent}
                 lastSavedContentRef={lastSavedContentRef}
               />
             </div>
-            <div className="w-1/3">
+            <div className="w-1/3" style={{ marginRight: "300px" }}>
               <SimilarEntriesComponent
                 filePath={selectedFilePath}
                 onFileSelect={onFileSelect}
               />
             </div>
+            <div className="absolute right-0 top-0 h-full w-[300px]">
+              <ChatWithLLM />
+            </div>
           </div>
         )}
-        <ChatWithLLM />
       </div>
     </div>
   );