feat: make frontend fully responsive with mobile-first layout

Add mobile-responsive design with full feature parity:
- Bottom sheet (vaul) with 3 snap points for map+list coexistence
- Swipeable property cards with horizontal scroll-snap
- Hamburger menu with health, tasks, user info
- Full-screen map with repositioned legend (top-left on mobile)
- Filter FAB opening Sheet drawer
- TaskProgressDrawer from bottom on mobile
- All changes gated behind useIsMobile() hook (768px breakpoint)
- Desktop layout completely untouched

New components: MobileBottomSheet, SwipeableCardRow,
PropertyCardCompact, MobileMenu

Also fixes: idempotent longitude migration, React hooks order

frontend/src/components/PropertyCardCompact.tsx

@@ -0,0 +1,76 @@
+import { Bed, Maximize2 } from 'lucide-react';
+import type { PropertyProperties } from '@/types';
+
+interface PropertyCardCompactProps {
+    property: PropertyProperties;
+    isActive?: boolean;
+    isHighlighted?: boolean;
+    avgPricePerSqm?: number;
+    onClick?: () => void;
+}
+
+export function PropertyCardCompact({
+    property,
+    isActive = false,
+    isHighlighted = false,
+    avgPricePerSqm,
+    onClick,
+}: PropertyCardCompactProps) {
+    const isGoodDeal = avgPricePerSqm && property.qmprice > 0 && property.qmprice < avgPricePerSqm * 0.9;
+    const isExpensive = avgPricePerSqm && property.qmprice > avgPricePerSqm * 1.1;
+
+    const priceIndicator = isGoodDeal
+        ? { color: 'text-green-600 bg-green-50', label: 'Good deal' }
+        : isExpensive
+            ? { color: 'text-red-600 bg-red-50', label: 'Above avg' }
+            : null;
+
+    return (
+        <div
+            className={`w-[280px] shrink-0 snap-center rounded-lg border bg-background shadow-sm overflow-hidden cursor-pointer transition-all ${
+                isActive ? 'ring-2 ring-primary scale-[1.02]' : ''
+            } ${isHighlighted ? 'ring-2 ring-primary' : ''}`}
+            onClick={onClick}
+        >
+            {/* Thumbnail */}
+            <div className="h-28 w-full bg-muted">
+                {property.photo_thumbnail && (
+                    <img
+                        src={property.photo_thumbnail}
+                        alt="Property"
+                        className="w-full h-full object-cover"
+                    />
+                )}
+            </div>
+
+            {/* Details */}
+            <div className="p-3">
+                <div className="flex items-start justify-between gap-2">
+                    <div className="font-semibold text-base">
+                        £{property.total_price.toLocaleString()}
+                        {property.listing_type !== 'BUY' && (
+                            <span className="text-muted-foreground font-normal text-sm">/mo</span>
+                        )}
+                    </div>
+                    {priceIndicator && (
+                        <span className={`text-xs px-1.5 py-0.5 rounded shrink-0 ${priceIndicator.color}`}>
+                            {priceIndicator.label}
+                        </span>
+                    )}
+                </div>
+
+                <div className="flex items-center gap-3 mt-1.5 text-sm text-muted-foreground">
+                    <span className="flex items-center gap-1">
+                        <Bed className="h-3.5 w-3.5" />
+                        {property.rooms}
+                    </span>
+                    <span className="flex items-center gap-1">
+                        <Maximize2 className="h-3.5 w-3.5" />
+                        {property.qm} m²
+                    </span>
+                    <span>£{property.qmprice}/m²</span>
+                </div>
+            </div>
+        </div>
+    );
+}