Mobile-responsive UI: bottom tab nav, stacked dashboard, page fixes for phones

- Layout: sidebar hidden below md; mobile top header + bottom tab bar
  (Dashboard/Activities/Health/Routes) with a More slide-up sheet holding
  Records/Import/Profile/Users, Garmin sync progress and sign-out
- Dashboard: single-column widget stack on phones ordered from the saved
  desktop layout (stat cards pair into 2-col grid); drag-edit stays
  desktop-only; grid conditionally mounted so WidthProvider never
  measures a hidden container
- New useMediaQuery/useIsMobile hook (matchMedia, md breakpoint)
- ActivityDetail: 2-col stats on phones, wrapping map toolbar, Height
  control hidden on small screens
- Activities: compact distance/time/pace line on mobile rows
- Records/Users: horizontally scrollable tables; route records hide
  Pace/Date columns below sm
- Profile forms single-column on phones; Routes expanded card stacks;
  Health flex-wrap fixes; p-4 md:p-6 page padding; h-dvh for mobile
  browser chrome
- vite.config: VITE_PROXY_TARGET override for host-side dev

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/pages/RecordsPage.jsx

@@ -44,7 +44,7 @@ function DistancePRs() {
 
   return (
     <div className="space-y-4">
-      <div className="flex gap-2">
+      <div className="flex flex-wrap gap-2">
         {SPORTS.map(s => (
           <button
             key={s}
@@ -69,6 +69,7 @@ function DistancePRs() {
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <div className="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
+          <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
               <tr className="text-xs text-gray-500 border-b border-gray-800 bg-gray-900/80">
@@ -107,6 +108,7 @@ function DistancePRs() {
               ))}
             </tbody>
           </table>
+          </div>
         </div>
 
         <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
@@ -169,6 +171,7 @@ function RouteRecords() {
 
   return (
     <div className="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
+      <div className="overflow-x-auto">
       <table className="w-full text-sm">
         <thead>
           <tr className="text-xs text-gray-500 border-b border-gray-800 bg-gray-900/80">
@@ -176,8 +179,8 @@ function RouteRecords() {
             <th className="text-left px-3 py-3 font-medium">Route</th>
             <th className="text-right px-3 py-3 font-medium">Distance</th>
             <th className="text-right px-3 py-3 font-medium">Best time</th>
-            <th className="text-right px-3 py-3 font-medium">Pace</th>
-            <th className="text-right px-3 py-3 font-medium">Date</th>
+            <th className="hidden sm:table-cell text-right px-3 py-3 font-medium">Pace</th>
+            <th className="hidden sm:table-cell text-right px-3 py-3 font-medium">Date</th>
           </tr>
         </thead>
         <tbody>
@@ -200,16 +203,17 @@ function RouteRecords() {
               <td className="px-3 py-3 text-right font-mono text-yellow-400 font-semibold">
                 {formatDuration(rec.duration_s)}
               </td>
-              <td className="px-3 py-3 text-right text-gray-400 text-xs">
+              <td className="hidden sm:table-cell px-3 py-3 text-right text-gray-400 text-xs">
                 {formatPace(rec.avg_speed_ms, rec.sport_type)}
               </td>
-              <td className="px-3 py-3 text-right text-gray-400 text-xs">
+              <td className="hidden sm:table-cell px-3 py-3 text-right text-gray-400 text-xs">
                 {formatDate(rec.start_time)}
               </td>
             </tr>
           ))}
         </tbody>
       </table>
+      </div>
     </div>
   )
 }
@@ -255,6 +259,7 @@ function SegmentRecords() {
 
   return (
     <div className="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
+      <div className="overflow-x-auto">
       <table className="w-full text-sm">
         <thead>
           <tr className="text-xs text-gray-500 border-b border-gray-800 bg-gray-900/80">
@@ -302,6 +307,7 @@ function SegmentRecords() {
           ))}
         </tbody>
       </table>
+      </div>
     </div>
   )
 }
@@ -310,7 +316,7 @@ export default function RecordsPage() {
   const [tab, setTab] = useState('Distance PRs')
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-4 md:p-6 space-y-6">
       <h1 className="text-2xl font-bold text-white">Records</h1>
 
       <div className="flex gap-2 flex-wrap">