From 366187478939114bea4efc4ffb7b276bb1d20585 Mon Sep 17 00:00:00 2001
From: JK-le-dev <jkcondor13@gmail.com>
Date: Sat, 18 Oct 2025 21:39:02 -0500
Subject: [PATCH] style(footer+header): made both sticky

---
 .../src/components/layouts/chat-layout.jsx    |  2 +-
 .../src/components/ui/chat/chat-header.jsx    | 14 ++++--
 .../src/components/ui/chat/chat-window.jsx    |  6 +--
 .../src/components/ui/chat/message-input.jsx  | 47 ++++++++++---------
 4 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/web-app/src/components/layouts/chat-layout.jsx b/web-app/src/components/layouts/chat-layout.jsx
index ebb0208..df4f299 100644
--- a/web-app/src/components/layouts/chat-layout.jsx
+++ b/web-app/src/components/layouts/chat-layout.jsx
@@ -25,7 +25,7 @@ export default function ChatLayout() {
   }
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col justify-between h-full w-full max-w-4xl gap-4 p-4">
       <ChatHeader />
       <ChatWindow messages={messages} />
       <MessageInput onSend={handleSend} />
diff --git a/web-app/src/components/ui/chat/chat-header.jsx b/web-app/src/components/ui/chat/chat-header.jsx
index 9a329b4..1c57627 100644
--- a/web-app/src/components/ui/chat/chat-header.jsx
+++ b/web-app/src/components/ui/chat/chat-header.jsx
@@ -2,10 +2,14 @@ import React from "react";
 
 export default function ChatHeader({ title = "Title of Chat" }) {
   return (
-    <header className="flex justify-center text-slate-100">
-      <h1 className="text-lg font-semibold shadow-xl bg-gray-900 px-4 py-2 rounded-4xl">
-        {title}
-      </h1>
-    </header>
+    <div className="w-full flex justify-center">
+      <header className="text-slate-100 fixed top-2">
+        <div>
+          <h1 className="text-lg font-semibold shadow-xl bg-gray-900 px-6 py-2 rounded-4xl">
+            {title}
+          </h1>
+        </div>
+      </header>
+    </div>
   );
 }
diff --git a/web-app/src/components/ui/chat/chat-window.jsx b/web-app/src/components/ui/chat/chat-window.jsx
index 49c689e..a012c6c 100644
--- a/web-app/src/components/ui/chat/chat-window.jsx
+++ b/web-app/src/components/ui/chat/chat-window.jsx
@@ -3,9 +3,7 @@ import React, { useRef, useEffect } from "react";
 function MessageBubble({ message }) {
   const isUser = message.role === "user";
   return (
-    <div
-      className={`flex ${isUser ? "justify-end" : "justify-start"} px-4 py-8`}
-    >
+    <div className={`flex ${isUser ? "justify-end" : "justify-start"} py-2`}>
       <div
         className={`max-w-[70%] p-3 rounded-lg ${isUser ? "bg-indigo-600 text-white" : "bg-gray-700 text-slate-100"}`}
       >
@@ -17,7 +15,7 @@ function MessageBubble({ message }) {
 
 export default function ChatWindow({ messages }) {
   return (
-    <div className="flex-1 overflow-auto p-2">
+    <div className="flex-1 overflow-auto px-2 pb-16">
       <div className="">
         {messages.map((m, i) => (
           <MessageBubble key={i} message={m} />
diff --git a/web-app/src/components/ui/chat/message-input.jsx b/web-app/src/components/ui/chat/message-input.jsx
index 16dbe1c..cdc8e6a 100644
--- a/web-app/src/components/ui/chat/message-input.jsx
+++ b/web-app/src/components/ui/chat/message-input.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import DeleteButton from "src/components/ui/button/delete-button";
-import DownButton from "../button/down-button";
+import DownButton from "src/components/ui/button/down-button";
+import { MessageCirclePlus } from "lucide-react";
 
 export default function MessageInput({ onSend }) {
   const [text, setText] = useState("");
@@ -13,27 +14,31 @@ export default function MessageInput({ onSend }) {
   }
 
   return (
-    <div className="flex flex-col gap-2">
-      <div className="flex justify-between">
-        <DeleteButton></DeleteButton>
-        <DownButton></DownButton>
-      </div>
-      <form onSubmit={handleSubmit} className="bg-gray-900 rounded-2xl">
-        <div className="flex p-2 shadow-xl">
-          <input
-            value={text}
-            onChange={(e) => setText(e.target.value)}
-            placeholder="Type a message..."
-            className="flex-1 mx-2 rounded-md shadow-2sx border-none focus:border-none focus:outline-none"
-          />
-          <button
-            type="submit"
-            className="px-4 py-2 bg-gray-700 rounded-xl ml-4"
-          >
-            Send
-          </button>
+    <div className="w-full flex justify-center">
+      <footer className="fixed bottom-2 max-w-2xl w-full px-4">
+        <div className="flex flex-col gap-2">
+          <div className="flex justify-between">
+            <DeleteButton></DeleteButton>
+            <DownButton></DownButton>
+          </div>
+          <form onSubmit={handleSubmit} className="bg-gray-900 rounded-2xl">
+            <div className="flex p-2 shadow-xl">
+              <input
+                value={text}
+                onChange={(e) => setText(e.target.value)}
+                placeholder="Type a message..."
+                className="flex-1 mx-2 rounded-md shadow-2sx border-none focus:border-none focus:outline-none"
+              />
+              <button
+                type="submit"
+                className="flex gap-2 px-4 py-2 bg-gray-700 rounded-xl ml-4"
+              >
+                Send
+              </button>
+            </div>
+          </form>
         </div>
-      </form>
+      </footer>
     </div>
   );
 }