Fix mobile navbar layout

mindcheck-web/src/app/page.tsx

@@ -6,17 +6,27 @@ export default function Home() {
       {/* TopNavBar */}
       <nav className="w-full top-0 sticky bg-surface dark:bg-on-background border-b border-outline-variant z-50">
         <div className="flex justify-between items-center h-16 px-gutter max-w-container-max mx-auto">
-          <div className="flex items-center gap-2">
+          {/* Logo */}
+          <div className="flex items-center gap-1 md:gap-2">
             <span className="material-symbols-outlined text-primary font-bold text-2xl" data-icon="psychology">psychology</span>
-            <span className="font-hero-lg text-hero-lg font-bold text-primary dark:text-inverse-primary">MindCheck</span>
+            <span className="text-xl md:text-hero-lg md:font-hero-lg font-bold text-primary dark:text-inverse-primary">MindCheck</span>
           </div>
-          <div className="hidden md:flex gap-8">
+
+          {/* Desktop Links */}
+          <div className="hidden md:flex items-center gap-8">
             <a className="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#how-it-works">How it works</a>
             <Link className="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="/history">History</Link>
+            <Link href="/chat" className="font-body-md text-body-md bg-primary-container text-on-primary px-5 py-3 rounded active:scale-95 duration-150 hover:opacity-90 whitespace-nowrap">
+              Start Screening
+            </Link>
+          </div>
+
+          {/* Mobile Links */}
+          <div className="flex md:hidden items-center gap-4">
+            <Link href="/history" className="text-on-surface-variant hover:text-primary p-2 flex items-center">
+              <span className="material-symbols-outlined text-2xl" data-icon="history">history</span>
+            </Link>
           </div>
-          <Link href="/chat" className="font-body-md text-body-md bg-primary-container text-on-primary px-5 py-3 rounded active:scale-95 duration-150 hover:opacity-90">
-            Start Screening
-          </Link>
         </div>
       </nav>
 
@@ -32,7 +42,7 @@ export default function Home() {
             <p className="font-body-md text-body-md text-on-surface-variant max-w-lg">
               8 short PHQ-8 based questions. Anonymous, free, and does not replace professional diagnosis.
             </p>
-            <div className="flex items-center gap-4 mt-4">
+            <div className="flex flex-wrap items-center gap-4 mt-4">
               <Link href="/chat" className="font-body-md text-body-md bg-primary-container text-on-primary px-5 py-3 rounded active:scale-95 duration-150 hover:opacity-90">
                 Start Screening
               </Link>
@@ -43,14 +53,14 @@ export default function Home() {
           </div>
 
           {/* Right: Abstract Decorative Block (40%) */}
-          <div className="md:col-span-5 relative h-64 md:h-80 w-full flex justify-center items-center">
+          <div className="md:col-span-5 relative h-48 md:h-80 w-full flex justify-center items-center">
             {/* Stacked Cards */}
-            <div className="absolute bg-surface w-4/5 h-48 border border-outline-variant rounded-lg rotate-6 opacity-60"></div>
-            <div className="absolute bg-surface w-4/5 h-48 border border-outline-variant rounded-lg -rotate-3 opacity-80"></div>
+            <div className="absolute bg-surface w-4/5 h-36 md:h-48 border border-outline-variant rounded-lg rotate-6 opacity-60"></div>
+            <div className="absolute bg-surface w-4/5 h-36 md:h-48 border border-outline-variant rounded-lg -rotate-3 opacity-80"></div>
             {/* Main Foreground Card */}
-            <div className="relative bg-surface w-4/5 h-48 border border-outline-variant rounded-lg p-6 flex flex-col justify-center items-center shadow-sm">
+            <div className="relative bg-surface w-4/5 h-36 md:h-48 border border-outline-variant rounded-lg p-6 flex flex-col justify-center items-center shadow-sm">
               <span className="font-label-uppercase text-label-uppercase text-secondary mb-2">PHQ-8 SCORE</span>
-              <span className="text-5xl font-bold text-primary mb-4">14</span>
+              <span className="text-4xl md:text-5xl font-bold text-primary mb-4">14</span>
               {/* Fake Bar Chart Snippet */}
               <div className="w-full flex gap-2 h-10 items-end px-4">
                 <div className="w-1/4 bg-surface-variant h-1/2 rounded-t"></div>
@@ -83,8 +93,8 @@ export default function Home() {
 
         {/* PHQ-8 Educational Section */}
         <section id="about-phq8" className="w-full mt-16 scroll-mt-24">
-          <div className="bg-surface-container-low border border-outline-variant rounded-2xl p-8 md:p-12 shadow-sm">
-            <div className="flex flex-col md:flex-row gap-12 items-center">
+          <div className="bg-surface-container-low border border-outline-variant rounded-2xl p-5 md:p-12 shadow-sm">
+            <div className="flex flex-col md:flex-row gap-6 md:gap-12 items-center">
               <div className="flex-1 flex flex-col gap-4">
                 <div className="inline-flex items-center gap-2 px-3 py-1 bg-primary-container text-on-primary-container rounded-full w-max mb-2">
                   <span className="material-symbols-outlined text-sm" data-icon="school">school</span>
@@ -140,7 +150,7 @@ export default function Home() {
         {/* How It Works Steps */}
         <section className="w-full mt-12">
           <h2 className="font-section-heading text-section-heading text-on-surface mb-8 text-center">How It Works</h2>
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
             {[
               { icon: "chat_bubble", title: "Answer 8 Questions", desc: "Our chatbot asks 8 PHQ-8 interview questions — answer via quick chips or type freely." },
               { icon: "psychology", title: "AI Analysis", desc: "Your responses are analyzed using a trained MPNet deep learning model from DAIC-WOZ research." },
@@ -167,7 +177,7 @@ export default function Home() {
           <p className="font-caption-sm text-caption-sm text-on-surface-variant max-w-2xl">
             MindCheck is not a replacement for professional medical diagnosis. Please contact mental health professionals if you are in an emergency.
           </p>
-          <p className="font-caption-sm text-caption-sm text-on-surface-variant opacity-60">© 2023 MindCheck. All rights reserved.</p>
+          <p className="font-caption-sm text-caption-sm text-on-surface-variant opacity-60">© {new Date().getFullYear()} MindCheck. All rights reserved.</p>
         </div>
       </footer>
     </>