make input and result card sticky

dokmy · Jan 13, 2024 · 79dbae7 · 79dbae7
1 parent e3b3968
commit 79dbae7
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 12 deletions.
diff --git a/src/app/(root)/(routes)/dashboard/page.tsx b/src/app/(root)/(routes)/dashboard/page.tsx
@@ -78,7 +78,7 @@ const dashboardPage = () => {
   }
 
   return (
-    <div className="flex flex-row flex-wrap overflow-x-auto gap-5 p-5 justify-center">
+    <div className="flex flex-row flex-wrap gap-5 p-5 justify-center">
       {searches.map((search, index) => (
         <div key={index} className="w-96 space-3 h-full">
           <Card className="w-full max-w-sm mx-auto bg-gray-800 text-white">

diff --git a/src/app/(root)/(routes)/results/components/chat-component-ready.tsx b/src/app/(root)/(routes)/results/components/chat-component-ready.tsx
@@ -48,28 +48,34 @@ const ChatComponentReady: React.FC<ChatComponentReadyProps> = (props) => {
 
   return (
     <div
-      className={`flex w-full h-full ${
+      className={`flex ${
         isIframeShown ? "flex-row" : "flex-col"
-      }`}
+      } h-[calc(100vh-4rem)]`}
     >
       {isIframeShown && (
         <iframe
           src={data.caseUrl}
-          className="w-1/2 h-full"
+          className="w-1/2 h-full flex-none"
           title="Case Details"
         ></iframe>
       )}
 
       <div
-        className={`w-full h-full ${
+        className={`h-full overflow-y-scroll ${
           isIframeShown ? "w-1/2" : "w-full"
-        } overflow-y-auto`}
+        }`}
       >
-        <ResultCard data={data} onReadCaseClick={onToggleIframe} />
-        <ChatMessages key={data.id} messages={messages} />
-        <div className="mb-1 relative p-3 border-t flex-none">
+        <div className="w-full sticky top-0 bg-black">
+          <ResultCard data={data} onReadCaseClick={onToggleIframe} />
+        </div>
+
+        <div className="flex-1 overflow-y-auto">
+          <ChatMessages key={data.id} messages={messages} />
+        </div>
+
+        <div className="w-full p-3 border-t bg-gray-900 sticky bottom-0">
           <form onSubmit={handleSubmit}>
-            <div className="flex-row space-x-2">
+            <div className="relative w-full">
               <input
                 className="resize-none overflow-auto max-h-24 border rounded w-full p-3 pl-3 pr-20 text-gray-200 leading-tight bg-black border-gray-700 duration-200 h-20"
                 value={input}

diff --git a/src/app/(root)/layout.tsx b/src/app/(root)/layout.tsx
@@ -12,7 +12,7 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
       <div className="hidden md:flex mt-16 h-full w-20 flex-col fixed inset-y-0 border-r">
         <Sidebar />
       </div>
-      <main className="flex-1 md:pl-20 pt-16 overflow-auto">{children}</main>
+      <main className="flex-1 md:pl-20 pt-16">{children}</main>
     </div>
   );
 };

diff --git a/src/app/components/chat-messages.tsx b/src/app/components/chat-messages.tsx
@@ -21,7 +21,7 @@ export default function Messages({ messages }: { messages: Message[] }) {
   };
 
   return (
-    <div className="flex flex-col bg-gray-700 leading-7 overflow-y-auto">
+    <div className="flex flex-col bg-gray-700 leading-7 h-full">
       {messages.map((msg, index) => (
         <div
           key={index}