Fix mobile history navbar layout

mindcheck-web/src/app/history/page.tsx

@@ -57,28 +57,36 @@ export default function HistoryPage() {
     <>
       {/* TopNavBar */}
       <nav className="bg-surface dark:bg-on-background w-full top-0 sticky border-b border-outline-variant z-50">
-        <div className="flex justify-between items-center h-16 px-gutter max-w-container-max mx-auto">
-          <Link href="/" className="font-hero-lg text-hero-lg font-bold text-primary dark:text-inverse-primary hidden md:block">
-            MindCheck
-          </Link>
-          <Link href="/" className="md:hidden text-primary flex items-center gap-2">
-            <span className="material-symbols-outlined">arrow_back</span>
-          </Link>
-          <div className="font-section-heading text-section-heading text-primary absolute left-1/2 -translate-x-1/2">
+        <div className="flex items-center h-16 px-gutter max-w-container-max mx-auto">
+          {/* Left Side */}
+          <div className="flex-1 flex justify-start">
+            <Link href="/" className="font-hero-lg text-hero-lg font-bold text-primary dark:text-inverse-primary hidden md:block">
+              MindCheck
+            </Link>
+            <Link href="/" className="md:hidden text-primary flex items-center p-2 -ml-2">
+              <span className="material-symbols-outlined">arrow_back</span>
+            </Link>
+          </div>
+          
+          {/* Center */}
+          <div className="text-base md:text-section-heading md:font-section-heading font-semibold text-primary truncate shrink-0 text-center">
             Screening History
           </div>
-          <div className="flex items-center gap-4">
+          
+          {/* Right Side */}
+          <div className="flex-1 flex justify-end items-center gap-2 md:gap-4">
             {history.length > 0 && (
               <button
                 onClick={clearHistory}
                 className="text-error hover:opacity-80 transition-opacity font-caption-sm text-caption-sm flex items-center gap-1"
               >
                 <span className="material-symbols-outlined text-[18px]">delete</span>
-                Clear
+                <span className="hidden md:inline">Clear</span>
               </button>
             )}
-            <Link href="/" className="px-4 py-2 bg-surface-container-high hover:bg-surface-container text-on-surface rounded font-caption-sm text-caption-sm transition-colors border border-outline-variant flex items-center gap-1">
-              Back to Home
+            <Link href="/" className="p-2 md:px-4 md:py-2 bg-surface-container-high hover:bg-surface-container text-on-surface rounded font-caption-sm text-caption-sm transition-colors border border-outline-variant flex items-center gap-1">
+              <span className="hidden md:inline">Back to Home</span>
+              <span className="material-symbols-outlined text-[20px] md:hidden">home</span>
             </Link>
           </div>
         </div>
@@ -110,12 +118,12 @@ export default function HistoryPage() {
               <table className="w-full text-left border-collapse">
                 <thead>
                   <tr className="border-b border-outline-variant bg-surface-container-low font-label-uppercase text-label-uppercase text-secondary">
-                    <th className="py-4 px-6 font-semibold">#</th>
-                    <th className="py-4 px-6 font-semibold">Date</th>
-                    <th className="py-4 px-6 font-semibold">Score</th>
-                    <th className="py-4 px-6 font-semibold">Category</th>
-                    <th className="py-4 px-6 font-semibold">Method</th>
-                    <th className="py-4 px-6 font-semibold text-right">Action</th>
+                    <th className="py-3 px-3 md:py-4 md:px-6 font-semibold hidden md:table-cell">#</th>
+                    <th className="py-3 px-3 md:py-4 md:px-6 font-semibold">Date</th>
+                    <th className="py-3 px-3 md:py-4 md:px-6 font-semibold">Score</th>
+                    <th className="py-3 px-3 md:py-4 md:px-6 font-semibold">Category</th>
+                    <th className="py-3 px-3 md:py-4 md:px-6 font-semibold hidden md:table-cell">Method</th>
+                    <th className="py-3 px-3 md:py-4 md:px-6 font-semibold text-right">Action</th>
                   </tr>
                 </thead>
                 <tbody className="font-body-md text-body-md text-on-surface">
@@ -127,26 +135,26 @@ export default function HistoryPage() {
                         className="border-b border-outline-variant hover:bg-surface-container-low transition-colors"
                         style={{ animation: `fadeSlideIn 0.4s ease-out ${i * 50}ms both` }}
                       >
-                        <td className="py-4 px-6 text-on-surface-variant">{i + 1}</td>
-                        <td className="py-4 px-6">
+                        <td className="py-3 px-3 md:py-4 md:px-6 text-on-surface-variant hidden md:table-cell">{i + 1}</td>
+                        <td className="py-3 px-3 md:py-4 md:px-6">
                           {new Date(item.date).toLocaleDateString("en-US", {
                             day: "numeric",
                             month: "short",
                             year: "numeric",
                           })}
                         </td>
-                        <td className="py-4 px-6 font-medium">{Math.round(item.total_score)}</td>
-                        <td className="py-4 px-6">
+                        <td className="py-3 px-3 md:py-4 md:px-6 font-medium">{Math.round(item.total_score)}</td>
+                        <td className="py-3 px-3 md:py-4 md:px-6">
                           <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${badgeStyle}`}>
                             {item.severity.label}
                           </span>
                         </td>
-                        <td className="py-4 px-6">
+                        <td className="py-3 px-3 md:py-4 md:px-6 hidden md:table-cell">
                           <span className={`text-xs ${item.fallback ? "text-[#F57C00]" : "text-primary"}`}>
                             {item.fallback ? "Keyword" : "AI Model"}
                           </span>
                         </td>
-                        <td className="py-4 px-6 text-right">
+                        <td className="py-3 px-3 md:py-4 md:px-6 text-right">
                           <Link
                             className="text-primary hover:text-primary-container font-medium flex items-center justify-end gap-1"
                             href={`/result?id=${i}`}
@@ -161,7 +169,7 @@ export default function HistoryPage() {
               </table>
             </div>
             {/* Summary Footer */}
-            <div className="border-t border-outline-variant bg-surface-container-lowest px-6 py-4 flex items-center justify-between">
+            <div className="border-t border-outline-variant bg-surface-container-lowest px-3 py-3 md:px-6 md:py-4 flex items-center justify-between">
               <div className="font-caption-sm text-caption-sm text-secondary">
                 {history.length} screening{history.length !== 1 ? "s" : ""} saved
               </div>
@@ -179,7 +187,7 @@ export default function HistoryPage() {
           <p className="font-caption-sm text-caption-sm text-on-surface-variant max-w-2xl">
             MindCheck is not a substitute for professional medical diagnosis. Please contact a mental health professional if you are in an emergency.
           </p>
-          <p className="font-caption-sm text-caption-sm text-on-surface-variant mt-2">© 2023 MindCheck. All rights reserved.</p>
+          <p className="font-caption-sm text-caption-sm text-on-surface-variant mt-2">© {new Date().getFullYear()} MindCheck. All rights reserved.</p>
         </div>
       </footer>