FIxes

frontend/src/components/map/AreaPane.tsx

@@ -84,10 +84,16 @@ export default function AreaPane({
   }
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="relative h-full">
-      <div className="p-3 border-b border-warm-200 dark:border-warm-700">
+      <div className="absolute top-2 right-2 z-20">
-        <div className="flex justify-between items-center">
+        <IconButton onClick={onClose} title="Close">
-          <div className="flex items-center gap-2">
+          <CloseIcon />
+        </IconButton>
+      </div>
+
+      <div className="h-full overflow-y-auto">
+        <div className="p-3">
+          <div className="flex items-center gap-2 pr-8">
             <div>
               <h2 className="text-sm font-semibold dark:text-warm-100">
                 {isPostcode ? hexagonId : 'Area Statistics'}
@@ -100,35 +106,29 @@ export default function AreaPane({
               <div className="w-3 h-3 border-2 border-teal-600 dark:border-teal-400 border-t-transparent rounded-full animate-spin" />
             )}
           </div>
-          <IconButton onClick={onClose} title="Close">
+          {propertyCount != null && (
-            <CloseIcon />
+            <p className="text-sm text-warm-600 dark:text-warm-400 mt-1">
-          </IconButton>
+              {propertyCount.toLocaleString()} properties
-        </div>
+            </p>
-        {propertyCount != null && (
+          )}
-          <p className="text-sm text-warm-600 dark:text-warm-400 mt-1">
+          <p className="text-xs text-warm-500 dark:text-warm-400 mt-1">
-            {propertyCount.toLocaleString()} properties
+            Stats for {isPostcode ? 'current and historical' : 'all'} properties
+            in this {isPostcode ? 'postcode' : 'area'}
+            {Object.keys(filters).length > 0 ? ' matching all active filters' : ''}
           </p>
-        )}
+          {stats && stats.count > 0 && (
-        <p className="text-xs text-warm-500 dark:text-warm-400 mt-1">
+            <button
-          Stats for {isPostcode ? 'current and historical' : 'all'} properties
+              onClick={onViewProperties}
-          in this {isPostcode ? 'postcode' : 'area'}
+              className="mt-2 w-full text-sm py-1.5 rounded bg-teal-600 hover:bg-teal-700 text-white font-medium"
-          {Object.keys(filters).length > 0 ? ' matching all active filters' : ''}
+            >
-        </p>
+              View {stats.count.toLocaleString()} Properties
-        {stats && stats.count > 0 && (
+            </button>
-          <button
+          )}
-            onClick={onViewProperties}
+        </div>
-            className="mt-2 w-full text-sm py-1.5 rounded bg-teal-600 hover:bg-teal-700 text-white font-medium"
-          >
-            View {stats.count.toLocaleString()} Properties
-          </button>
-        )}
-      </div>
 
-      {hexagonLocation && stats && (
+        {hexagonLocation && stats && (
-        <ExternalSearchLinks location={hexagonLocation} filters={filters} />
+          <ExternalSearchLinks location={hexagonLocation} filters={filters} />
-      )}
+        )}
-
-      <div className="flex-1 overflow-y-auto">
         {loading && !stats ? (
           <LoadingSkeleton />
         ) : stats ? (

frontend/src/components/map/MapPage.tsx

@@ -296,10 +296,15 @@ export default function MapPage({
   }, [mapData.data, mapData.postcodeData, mapData.usePostcodeView]);
 
   useEffect(() => {
-    if (screenshotMode && !mapData.loading && mapData.data.length > 0) {
+    if (screenshotMode && !mapData.loading) {
-      window.__screenshot_ready = true;
+      const hasData = mapData.usePostcodeView
+        ? mapData.postcodeData.length > 0
+        : mapData.data.length > 0;
+      if (hasData) {
+        window.__screenshot_ready = true;
+      }
     }
-  }, [screenshotMode, mapData.loading, mapData.data.length]);
+  }, [screenshotMode, mapData.loading, mapData.data.length, mapData.postcodeData.length, mapData.usePostcodeView]);
 
   if (screenshotMode) {
     return (
@@ -519,6 +524,14 @@ export default function MapPage({
             onClose={() => setMobileDrawerOpen(false)}
             renderArea={renderAreaPane}
             renderProperties={renderPropertiesPane}
+            tab={selection.rightPaneTab}
+            onTabChange={(t) => {
+              if (t === 'properties') {
+                selection.handlePropertiesTabClick();
+              } else {
+                selection.setRightPaneTab(t);
+              }
+            }}
           />
         )}
 

frontend/src/components/map/PropertiesPane.tsx

@@ -50,7 +50,7 @@ export function PropertiesPane({
   }
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="h-full overflow-y-auto">
       {showInfo && (
         <InfoPopup
           title="Property Data"
@@ -76,7 +76,7 @@ export function PropertiesPane({
         </InfoPopup>
       )}
 
-      <div className="p-2 border-b border-warm-200 dark:border-navy-700">
+      <div className="p-2">
         <SearchInput
           value={search}
           onChange={setSearch}
@@ -85,7 +85,7 @@ export function PropertiesPane({
         />
       </div>
 
-      <div className="flex-1 overflow-y-auto">
+      <div>
         {loading && properties.length === 0 ? (
           <PropertyLoadingSkeleton />
         ) : (

frontend/src/components/map/TravelTimeCard.tsx

@@ -1,9 +1,12 @@
-import { useRef, useEffect, useCallback } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import { Slider } from '../ui/Slider';
 import { IconButton } from '../ui/IconButton';
+import { PillToggle } from '../ui/PillToggle';
 import { PlaceSearchInput } from '../ui/PlaceSearchInput';
+import InfoPopup from '../ui/InfoPopup';
 import { CloseIcon } from '../ui/icons/CloseIcon';
 import { EyeIcon } from '../ui/icons/EyeIcon';
+import { InfoIcon } from '../ui/icons/InfoIcon';
 import { MapPinIcon } from '../ui/icons/MapPinIcon';
 import { CarIcon } from '../ui/icons/CarIcon';
 import { BicycleIcon } from '../ui/icons/BicycleIcon';
@@ -50,6 +53,7 @@ export function TravelTimeCard({
 }: TravelTimeCardProps) {
   const search = useLocationSearch(mode);
   const containerRef = useRef<HTMLDivElement>(null);
+  const [showBestInfo, setShowBestInfo] = useState(false);
 
   // Close dropdown on outside click
   useEffect(() => {
@@ -100,43 +104,52 @@ export function TravelTimeCard({
         </div>
       </div>
 
-      {/* Destination search */}
+      {/* Destination */}
-      <div ref={containerRef} className="relative">
+      {slug && label ? (
-        <PlaceSearchInput
+        <div className="flex items-center gap-1.5 px-2 py-1 rounded border border-warm-200 dark:border-warm-700 bg-warm-50 dark:bg-warm-800">
-          search={search}
+          <MapPinIcon className="w-3 h-3 text-red-500 shrink-0" />
-          onSelect={selectResult}
+          <span className="text-xs text-navy-950 dark:text-warm-200 flex-1 truncate">
-          placeholder={slug ? 'Change destination...' : 'Search destination...'}
+            {label}
-          size="xs"
+          </span>
-          inputClassName="w-full px-2 py-1 text-xs rounded border border-warm-200 dark:border-warm-600 bg-white dark:bg-warm-800 text-navy-950 dark:text-warm-200 placeholder-warm-400 dark:placeholder-warm-500 outline-none focus:ring-1 focus:ring-teal-400"
+          <button
-          portal
+            onClick={() => onSetDestination('', '')}
-        />
+            className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 shrink-0"
-
+            title="Clear destination"
-        {slug && label && (
+          >
-          <div className="flex items-center gap-1 mt-1">
+            <CloseIcon className="w-3 h-3" />
-            <MapPinIcon className="w-3 h-3 text-red-500 shrink-0" />
+          </button>
-            <span className="text-xs text-warm-600 dark:text-warm-300">
+        </div>
-              {label}
+      ) : (
-            </span>
+        <div ref={containerRef} className="relative">
-          </div>
+          <PlaceSearchInput
-        )}
+            search={search}
-      </div>
+            onSelect={selectResult}
+            placeholder="Search stations..."
+            size="xs"
+            inputClassName="w-full px-2 py-1 text-xs rounded border border-warm-200 dark:border-warm-600 bg-white dark:bg-warm-800 text-navy-950 dark:text-warm-200 placeholder-warm-400 dark:placeholder-warm-500 outline-none focus:ring-1 focus:ring-teal-400"
+            portal
+          />
+        </div>
+      )}
 
       {/* Best-case toggle — transit only, shown when destination is set */}
       {slug && mode === 'transit' && (
-        <label className="flex items-center gap-1.5 cursor-pointer">
+        <div className="flex items-center gap-1.5">
-          <input
+          <PillToggle label="Best case" active={useBest} onClick={onToggleBest} size="xs" />
-            type="checkbox"
+          <IconButton onClick={() => setShowBestInfo(true)} title="What is best case?">
-            checked={useBest}
+            <InfoIcon className="w-3 h-3" />
-            onChange={onToggleBest}
+          </IconButton>
-            className="accent-teal-600 rounded"
+        </div>
-          />
+      )}
-          <span className="text-xs text-warm-600 dark:text-warm-300">
+
-            Best case
+      {showBestInfo && (
-          </span>
+        <InfoPopup title="Best case travel time" onClose={() => setShowBestInfo(false)}>
-          <span className="text-[10px] text-warm-400 dark:text-warm-500">
+          <p className="text-sm text-warm-700 dark:text-warm-300 leading-relaxed">
-            (optimal departure)
+            Uses the <strong>5th percentile</strong> travel time — the fastest realistic journey
-          </span>
+            if you time your departure to catch optimal connections. The default uses the{' '}
-        </label>
+            <strong>median</strong>, representing a typical journey regardless of when you leave.
+          </p>
+        </InfoPopup>
       )}
 
       {/* Time range slider — only show when we have data */}

frontend/src/components/ui/MobileMenu.tsx

@@ -145,14 +145,14 @@ export default function MobileMenu({
           {/* Auth buttons */}
           <div>
             {user ? (
-              <div className="flex items-center justify-between px-4 py-2">
+              <div className="flex items-center justify-between gap-3 px-4 py-2">
                 <span className="text-sm text-warm-300 truncate">{user.email}</span>
                 <button
                   onClick={() => {
                     onLogout();
                     onClose();
                   }}
-                  className="text-sm text-warm-400 hover:text-white"
+                  className="shrink-0 text-sm text-warm-400 hover:text-white"
                 >
                   Log out
                 </button>

frontend/src/hooks/useTravelTime.ts

@@ -69,7 +69,7 @@ export function useTravelTime(initial?: TravelTimeInitial) {
     (index: number) => {
       setEntries((prev) =>
         prev.map((entry, i) =>
-          i === index ? { ...entry, useBest: !entry.useBest, timeRange: null } : entry
+          i === index ? { ...entry, useBest: !entry.useBest } : entry
         )
       );
     },

server-rs/src/routes.rs

@@ -9,6 +9,7 @@ mod me;
 mod pb_proxy;
 mod places;
 mod pois;
+mod postcode_properties;
 mod postcode_stats;
 mod postcodes;
 pub(crate) mod properties;
@@ -35,6 +36,7 @@ pub use me::get_me;
 pub use pb_proxy::proxy_to_pocketbase;
 pub use places::get_places;
 pub use pois::{get_poi_categories, get_pois};
+pub use postcode_properties::get_postcode_properties;
 pub use postcode_stats::get_postcode_stats;
 pub use postcodes::{get_postcode_lookup, get_postcodes};
 pub use properties::get_hexagon_properties;

server-rs/src/routes/pb_proxy.rs

@@ -17,6 +17,7 @@ static PROXY_CLIENT: LazyLock<reqwest::Client> = LazyLock::new(|| {
     reqwest::Client::builder()
         .redirect(reqwest::redirect::Policy::none())
         .connect_timeout(Duration::from_secs(5))
+        .referer(false)
         .build()
         .expect("Failed to build proxy HTTP client")
 });

server-rs/src/routes/postcode_properties.rs

@@ -0,0 +1,144 @@
+use std::sync::Arc;
+
+use axum::extract::Query;
+use axum::http::StatusCode;
+use axum::response::{IntoResponse, Json};
+use axum::Extension;
+use serde::Deserialize;
+use tracing::{info, warn};
+
+use crate::auth::OptionalUser;
+use crate::consts::{DEFAULT_PROPERTIES_LIMIT, MAX_PROPERTIES_LIMIT, POSTCODE_SEARCH_OFFSET};
+use crate::licensing::check_license_point;
+use crate::parsing::{parse_filters, row_passes_filters};
+use crate::state::AppState;
+
+use super::properties::{HexagonPropertiesResponse, Property};
+
+#[derive(Deserialize)]
+pub struct PostcodePropertiesParams {
+    pub postcode: String,
+    pub filters: Option<String>,
+    pub limit: Option<usize>,
+    pub offset: Option<usize>,
+}
+
+pub async fn get_postcode_properties(
+    state: Arc<AppState>,
+    Extension(user): Extension<OptionalUser>,
+    Query(params): Query<PostcodePropertiesParams>,
+) -> Result<Json<HexagonPropertiesResponse>, axum::response::Response> {
+    let normalized = params
+        .postcode
+        .to_uppercase()
+        .split_whitespace()
+        .collect::<Vec<_>>()
+        .join(" ");
+
+    let pc_idx = match state.postcode_data.postcode_to_idx.get(&normalized) {
+        Some(&idx) => idx,
+        None => {
+            warn!(postcode = %normalized, "Postcode not found");
+            return Err((
+                StatusCode::NOT_FOUND,
+                format!("Postcode not found: {}", normalized),
+            )
+                .into_response());
+        }
+    };
+    let (centroid_lat, centroid_lon) = state.postcode_data.centroids[pc_idx];
+
+    check_license_point(&user.0, centroid_lat as f64, centroid_lon as f64)
+        .map_err(|(_, resp)| resp)?;
+
+    let filters_str = params.filters.clone();
+    let (parsed_filters, parsed_enum_filters) = parse_filters(
+        params.filters.as_deref(),
+        &state.feature_name_to_index,
+        &state.data.enum_values,
+    )
+    .map_err(|err| (StatusCode::BAD_REQUEST, err).into_response())?;
+    let num_filters = parsed_filters.len() + parsed_enum_filters.len();
+
+    let postcode_str = normalized.clone();
+
+    let result = tokio::task::spawn_blocking(move || {
+        let t0 = std::time::Instant::now();
+        let num_features = state.data.num_features;
+        let feature_data = &state.data.feature_data;
+        let feature_names = &state.data.feature_names;
+        let feature_name_to_index = &state.feature_name_to_index;
+        let enum_values = &state.data.enum_values;
+
+        let offset_deg: f64 = POSTCODE_SEARCH_OFFSET;
+        let min_lat = centroid_lat as f64 - offset_deg;
+        let max_lat = centroid_lat as f64 + offset_deg;
+        let min_lon = centroid_lon as f64 - offset_deg;
+        let max_lon = centroid_lon as f64 + offset_deg;
+
+        let mut matching_rows: Vec<usize> = Vec::new();
+        state
+            .grid
+            .for_each_in_bounds(min_lat, min_lon, max_lat, max_lon, |row_idx| {
+                let row = row_idx as usize;
+                if state.data.postcode(row) == postcode_str
+                    && row_passes_filters(
+                        row,
+                        &parsed_filters,
+                        &parsed_enum_filters,
+                        feature_data,
+                        num_features,
+                    )
+                {
+                    matching_rows.push(row);
+                }
+            });
+
+        matching_rows.sort_unstable_by_key(|&row| state.data.address(row).trim().is_empty());
+
+        let total = matching_rows.len();
+        let limit = params
+            .limit
+            .unwrap_or(DEFAULT_PROPERTIES_LIMIT)
+            .min(MAX_PROPERTIES_LIMIT);
+        let page_offset = params.offset.unwrap_or(0);
+        let truncated = total > page_offset + limit;
+
+        let properties: Vec<Property> = matching_rows
+            .iter()
+            .skip(page_offset)
+            .take(limit)
+            .map(|&row| {
+                super::properties::build_property(
+                    row, &state, feature_names, feature_name_to_index, feature_data,
+                    num_features, enum_values,
+                )
+            })
+            .collect();
+
+        let elapsed = t0.elapsed();
+        info!(
+            postcode = %postcode_str,
+            total,
+            returned = properties.len(),
+            offset = page_offset,
+            filters = num_filters,
+            filters_raw = filters_str.as_deref().unwrap_or("-"),
+            ms = format_args!("{:.1}", elapsed.as_secs_f64() * 1000.0),
+            "GET /api/postcode-properties"
+        );
+
+        Ok(HexagonPropertiesResponse {
+            properties,
+            total,
+            limit,
+            offset: page_offset,
+            truncated,
+        })
+    })
+    .await
+    .map_err(|error| (StatusCode::INTERNAL_SERVER_ERROR, error.to_string()).into_response())?
+    .map_err(|error: String| (StatusCode::INTERNAL_SERVER_ERROR, error).into_response())?;
+
+    Ok(Json(result))
+}

server-rs/src/routes/properties.rs

@@ -98,6 +98,60 @@ fn lookup_enum_value(
     }
 }
 
+pub fn build_property(
+    row: usize,
+    state: &AppState,
+    feature_names: &[String],
+    feature_name_to_index: &FxHashMap<String, usize>,
+    feature_data: &[f32],
+    num_features: usize,
+    enum_values: &FxHashMap<usize, Vec<String>>,
+) -> Property {
+    let mut features = FxHashMap::default();
+    let base = row * num_features;
+    for (feat_idx, feat_name) in feature_names.iter().enumerate() {
+        if enum_values.contains_key(&feat_idx) {
+            continue;
+        }
+        let value = feature_data[base + feat_idx];
+        if value.is_finite() {
+            features.insert(feat_name.clone(), value);
+        }
+    }
+
+    Property {
+        address: non_empty_string(state.data.address(row)),
+        postcode: non_empty_string(state.data.postcode(row)),
+        is_construction_date_approximate: Some(state.data.is_approx_build_date(row)),
+        property_type: lookup_enum_value(
+            feature_name_to_index, feature_data, num_features, enum_values, row, "Property type",
+        ),
+        built_form: lookup_enum_value(
+            feature_name_to_index, feature_data, num_features, enum_values, row, "Property type/built form",
+        ),
+        duration: lookup_enum_value(
+            feature_name_to_index, feature_data, num_features, enum_values, row, "Leashold/Freehold",
+        ),
+        current_energy_rating: lookup_enum_value(
+            feature_name_to_index, feature_data, num_features, enum_values, row, "Current energy rating",
+        ),
+        potential_energy_rating: lookup_enum_value(
+            feature_name_to_index, feature_data, num_features, enum_values, row, "Potential energy rating",
+        ),
+        lat: state.data.lat[row],
+        lon: state.data.lon[row],
+        renovation_history: state.data.renovation_history(row).to_vec(),
+        listing_features: state.data.listing_features(row).to_vec(),
+        listing_status: lookup_enum_value(
+            feature_name_to_index, feature_data, num_features, enum_values, row, "Listing status",
+        ),
+        listing_url: state.data.listing_url(row).map(String::from),
+        property_sub_type: state.data.property_sub_type(row).map(String::from),
+        price_qualifier: state.data.price_qualifier(row).map(String::from),
+        features,
+    }
+}
+
 pub async fn get_hexagon_properties(
     state: Arc<AppState>,
     Extension(user): Extension<OptionalUser>,
@@ -178,80 +232,10 @@ pub async fn get_hexagon_properties(
             .skip(offset)
             .take(limit)
             .map(|&row| {
-                let mut features = FxHashMap::default();
+                build_property(
-                let base = row * num_features;
+                    row, &state, feature_names, feature_name_to_index, feature_data,
-                for (feat_idx, feat_name) in feature_names.iter().enumerate() {
+                    num_features, enum_values,
-                    // Skip enum features in the generic features map
+                )
-                    if enum_values.contains_key(&feat_idx) {
-                        continue;
-                    }
-                    let value = feature_data[base + feat_idx];
-                    if value.is_finite() {
-                        features.insert(feat_name.clone(), value);
-                    }
-                }
-
-                Property {
-                    address: non_empty_string(state.data.address(row)),
-                    postcode: non_empty_string(state.data.postcode(row)),
-                    is_construction_date_approximate: Some(state.data.is_approx_build_date(row)),
-                    property_type: lookup_enum_value(
-                        feature_name_to_index,
-                        feature_data,
-                        num_features,
-                        enum_values,
-                        row,
-                        "Property type",
-                    ),
-                    built_form: lookup_enum_value(
-                        feature_name_to_index,
-                        feature_data,
-                        num_features,
-                        enum_values,
-                        row,
-                        "Property type/built form",
-                    ),
-                    duration: lookup_enum_value(
-                        feature_name_to_index,
-                        feature_data,
-                        num_features,
-                        enum_values,
-                        row,
-                        "Leashold/Freehold",
-                    ),
-                    current_energy_rating: lookup_enum_value(
-                        feature_name_to_index,
-                        feature_data,
-                        num_features,
-                        enum_values,
-                        row,
-                        "Current energy rating",
-                    ),
-                    potential_energy_rating: lookup_enum_value(
-                        feature_name_to_index,
-                        feature_data,
-                        num_features,
-                        enum_values,
-                        row,
-                        "Potential energy rating",
-                    ),
-                    lat: state.data.lat[row],
-                    lon: state.data.lon[row],
-                    renovation_history: state.data.renovation_history(row).to_vec(),
-                    listing_features: state.data.listing_features(row).to_vec(),
-                    listing_status: lookup_enum_value(
-                        feature_name_to_index,
-                        feature_data,
-                        num_features,
-                        enum_values,
-                        row,
-                        "Listing status",
-                    ),
-                    listing_url: state.data.listing_url(row).map(String::from),
-                    property_sub_type: state.data.property_sub_type(row).map(String::from),
-                    price_qualifier: state.data.price_qualifier(row).map(String::from),
-                    features,
-                }
             })
             .collect();