Merge pull request #115 from codeforpdx/update-page-layouts-and-margins

Enhancement: Improve layout for mobile

Author: leekahung

frontend/src/About.tsx

@@ -0,0 +1,56 @@
+import { useNavigate } from "react-router-dom";
+
+export default function About() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex items-center h-dvh pt-16 sm:pt-0">
+      <div className="relative max-w-2xl m-auto p-8 bg-[#F4F4F2] rounded-lg shadow-md">
+        <button
+          className="absolute top-4 left-4 flex text-[#4a90e2] hover:text-[#3a7bc8] font-semibold cursor-pointer"
+          onClick={() => navigate(-1)}
+          aria-label="Go back"
+        >
+          <svg
+            className="w-6 h-6 mr-2"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M15 19l-7-7 7-7"
+            />
+          </svg>
+          Back
+        </button>
+        <p className="my-6">
+          <strong>Tenant First Aid</strong> is an AI-powered chatbot designed to
+          help tenants navigate rental issues, answer questions, and provides
+          legal advice related to housing and eviction.
+        </p>
+        <h2 className="text-2xl font-semibold mt-6 mb-2">Features</h2>
+        <ul className="list-disc list-inside mb-6">
+          <li>Instant answers to common rental questions</li>
+          <li>Guidance on tenant rights and landlord obligations</li>
+          <li>Easy-to-use chat interface</li>
+          <li>Available 24/7</li>
+        </ul>
+        <h2 className="text-2xl font-semibold mt-6 mb-2">How It Works</h2>
+        <p className="mb-6">
+          Simply type your question or describe your situation, and Tenant First
+          Aid will provide helpful information or direct you to relevant
+          resources.
+        </p>
+        <h2 className="text-2xl font-semibold mt-6 mb-2">Disclaimer</h2>
+        <p className="">
+          <strong>Tenant First Aid</strong> is an AI assistant and does not
+          provide legal advice. For complex or urgent legal matters, please
+          consult a qualified professional.
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/AboutPage.tsx

@@ -1,8 +1,8 @@
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-import Chat from "./Chat.tsx";
-import AboutPage from "./AboutPage.tsx";
-import SessionContextProvider from "./contexts/SessionContext.tsx";
-import Navbar from "./pages/Chat/components/Navbar.tsx";
+import Chat from "./Chat";
+import About from "./About";
+import SessionContextProvider from "./contexts/SessionContext";
+import Navbar from "./pages/Chat/components/Navbar";
 
 export default function App() {
   return (
@@ -11,7 +11,7 @@ export default function App() {
         <Navbar />
         <Routes>
           <Route path="/" element={<Chat />} />
-          <Route path="/about" element={<AboutPage />} />
+          <Route path="/about" element={<About />} />
         </Routes>
       </Router>
     </SessionContextProvider>

frontend/src/App.tsx

@@ -16,7 +16,6 @@ export default function Chat() {
       setSelectedStatute(statute);
       setDrawerOpen(true);
     }
-
   };
 
   const closeDrawer = () => {
@@ -32,7 +31,7 @@ export default function Chat() {
             className={`container relative flex flex-col mx-auto p-6 bg-[#F4F4F2] rounded-lg shadow-[0_4px_6px_rgba(0,0,0,0.1)]
               ${
                 isOngoing
-                  ? "justify-between h-[calc(100dvh-10rem)]"
+                  ? "justify-between h-[calc(100dvh-4rem)] max-h-[calc(100dvh-4rem)] sm:h-[calc(100dvh-10rem)]"
                   : "justify-center max-w-[600px]"
               }`}
           >

frontend/src/Chat.tsx

@@ -31,13 +31,15 @@ export default function MessageWindow({
   };
 
   useEffect(() => {
-    inputRef.current?.focus();
     const messagesElement = messagesRef.current;
     if (messagesElement) {
       messagesElement.scrollTo({
         top: messagesElement.scrollHeight,
         behavior: "smooth",
       });
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 500);
     }
   }, [messages]);
 
@@ -50,7 +52,7 @@ export default function MessageWindow({
           </div>
         ) : (
           <div
-            className={`max-h-[calc(100vh-20rem)] mx-auto max-w-[700px] ${
+            className={`max-h-[calc(100dvh-240px)] sm:max-h-[calc(100dvh-20rem)] mx-auto max-w-[700px] ${
               isOngoing ? "overflow-y-scroll" : "overflow-y-none"
             }`}
             ref={messagesRef}
@@ -106,9 +108,7 @@ export default function MessageWindow({
             >
               Clear Chat
             </button>
-            <div className="">
-              <ExportMessagesButton messages={messages} />
-            </div>
+            <ExportMessagesButton messages={messages} />
           </div>
         ) : null}
       </div>