diff --git a/docs/api.md b/docs/api.md
index c422448df..f6bad02e6 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -791,6 +791,8 @@ interactiveMap.showPanel('info-panel', { focus: false })
 
 Hides a panel without removing it, preserving its content for when it is shown again.
 
+If focus is inside the panel, it moves to the element that opened the panel, or to the map if that element is no longer on the page. Otherwise focus stays where it is.
+
 | Parameter | Type | Description |
 |-----------|------|-------------|
 | `id` | `string` | Panel identifier to hide |
diff --git a/docs/api/context.md b/docs/api/context.md
index b24953454..63708de26 100644
--- a/docs/api/context.md
+++ b/docs/api/context.md
@@ -96,6 +96,8 @@ Current map state, including:
 }
 ```
 
+`mapState.mapSizeScale` is the scale for the current map size (`small`: 1, `medium`: 1.5, `large`: 2). Multiply screen positions from `mapProvider.mapToScreen` by it to position elements over the map.
+
 `mapState.isMapReady` is `true` once the map instance has been created (`map:ready`). The base map may still be loading at that point; check `mapProvider.isBaseMapReady()` before adding sources or layers to the underlying map.
 
 ---
diff --git a/plugins/datasets/src/initialise/DatasetsInit.jsx b/plugins/datasets/src/initialise/DatasetsInit.jsx
index c3c21b323..a9e314cc4 100755
--- a/plugins/datasets/src/initialise/DatasetsInit.jsx
+++ b/plugins/datasets/src/initialise/DatasetsInit.jsx
@@ -4,39 +4,28 @@ import { EVENTS } from '../../../../src/config/events.js'
 import { initialiseDatasets } from './initialiseDatasets.js'
 import { loadLayerAdapter } from '../adapters/loadLayerAdapter.js'
 import { hasLayersMenu } from '../utils/hasLayersMenu.js'
-import { getPanelElementId } from '../../../../src/utils/getPanelElementId.js'
 
 const LAYERS_PANEL_ID = 'datasetsLayers'
 
 // Closes the Layers panel if its menu empties while it's open
-function useCloseEmptyLayersPanel ({ appConfig, appState, pluginConfig, pluginState, services }) {
-  const { eventBus, focusMap } = services
+function useCloseEmptyLayersPanel ({ appState, pluginConfig, pluginState, services }) {
+  const { eventBus } = services
   const hasMenu = hasLayersMenu({ pluginConfig, pluginState })
   const isLayersPanelOpen = Boolean(appState.openPanels[LAYERS_PANEL_ID])
-  const focusFrameRef = useRef(null)
 
   useEffect(() => {
-    if (hasMenu || !isLayersPanelOpen) {
-      return
-    }
-    const panelEl = document.getElementById(getPanelElementId(appConfig.id, LAYERS_PANEL_ID))
-    const hadFocus = Boolean(panelEl?.contains(document.activeElement))
-    eventBus.emit(EVENTS.APP_HIDE_PANEL, LAYERS_PANEL_ID)
-    if (hadFocus) {
-      // Let the panel close and release modal focus/inert first, as Panel's handleClose does
-      focusFrameRef.current = requestAnimationFrame(() => focusMap())
+    if (!hasMenu && isLayersPanelOpen) {
+      eventBus.emit(EVENTS.APP_HIDE_PANEL, LAYERS_PANEL_ID)
     }
   }, [hasMenu, isLayersPanelOpen])
-
-  useEffect(() => () => cancelAnimationFrame(focusFrameRef.current), [])
 }
 
-export function DatasetsInit ({ appConfig, appState, pluginConfig, pluginState, mapState, mapProvider, services }) {
+export function DatasetsInit ({ appState, pluginConfig, pluginState, mapState, mapProvider, services }) {
   const { dispatch, datasetRegistry } = pluginState
   const { eventBus, symbolRegistry, patternRegistry } = services
   const isBaseMapReady = Boolean(mapProvider?.isBaseMapReady())
 
-  useCloseEmptyLayersPanel({ appConfig, appState, pluginConfig, pluginState, services })
+  useCloseEmptyLayersPanel({ appState, pluginConfig, pluginState, services })
 
   // Keep a ref to the latest pluginState so event handlers can access current data
   const pluginStateRef = useRef(pluginState)
diff --git a/plugins/datasets/src/initialise/DatasetsInit.test.jsx b/plugins/datasets/src/initialise/DatasetsInit.test.jsx
index 413ecac45..c3488462c 100644
--- a/plugins/datasets/src/initialise/DatasetsInit.test.jsx
+++ b/plugins/datasets/src/initialise/DatasetsInit.test.jsx
@@ -55,7 +55,6 @@ const makeProps = (overrides = {}) => {
     mapProvider: { isBaseMapReady: jest.fn().mockReturnValue(true) },
     services: {
       eventBus: makeEventBus(),
-      focusMap: jest.fn(),
       symbolRegistry: {},
       patternRegistry: {}
     },
@@ -80,20 +79,6 @@ describe('DatasetsInit', () => {
 
   describe('menu panel management', () => {
     const openPanelState = { openPanels: { datasetsLayers: {} } }
-    let panelEl
-
-    beforeEach(() => {
-      jest.useFakeTimers()
-      panelEl = document.createElement('div')
-      panelEl.id = 'test-map-panel-datasets-layers'
-      panelEl.tabIndex = -1
-      document.body.appendChild(panelEl)
-    })
-
-    afterEach(() => {
-      panelEl.remove()
-      jest.useRealTimers()
-    })
 
     it('does not remove the panel or hide the button when there is no menu', () => {
       const props = makeProps({ pluginConfig: { datasets: [] } })
@@ -103,28 +88,13 @@ describe('DatasetsInit', () => {
       expect(props.services.eventBus.emit).not.toHaveBeenCalledWith(EVENTS.APP_TOGGLE_BUTTON_STATE, expect.anything())
     })
 
-    it('closes the open panel and focuses the map when the menu empties with focus inside it', () => {
-      const props = makeProps({ appState: openPanelState })
-      const { eventBus, focusMap } = props.services
-      const { rerender } = render(<DatasetsInit {...props} />)
-      panelEl.focus()
-
-      rerender(<DatasetsInit {...props} pluginState={makePluginState()} />)
-      expect(eventBus.emit).toHaveBeenCalledWith(EVENTS.APP_HIDE_PANEL, 'datasetsLayers')
-      expect(focusMap).not.toHaveBeenCalled()
-      act(() => jest.runOnlyPendingTimers())
-      expect(focusMap).toHaveBeenCalledTimes(1)
-    })
-
-    it('closes the open panel without moving focus when focus is outside it', () => {
+    it('closes the open panel when the menu empties', () => {
       const props = makeProps({ appState: openPanelState })
-      const { eventBus, focusMap } = props.services
       const { rerender } = render(<DatasetsInit {...props} />)
+      expect(props.services.eventBus.emit).not.toHaveBeenCalledWith(EVENTS.APP_HIDE_PANEL, 'datasetsLayers')
 
       rerender(<DatasetsInit {...props} pluginState={makePluginState()} />)
-      act(() => jest.runOnlyPendingTimers())
-      expect(eventBus.emit).toHaveBeenCalledWith(EVENTS.APP_HIDE_PANEL, 'datasetsLayers')
-      expect(focusMap).not.toHaveBeenCalled()
+      expect(props.services.eventBus.emit).toHaveBeenCalledWith(EVENTS.APP_HIDE_PANEL, 'datasetsLayers')
     })
 
     it('closes a panel that is open on load when there is no menu', () => {
@@ -142,16 +112,6 @@ describe('DatasetsInit', () => {
       render(<DatasetsInit {...props} pluginState={pluginState} />)
       expect(props.services.eventBus.emit).not.toHaveBeenCalledWith(EVENTS.APP_HIDE_PANEL, 'datasetsLayers')
     })
-
-    it('cancels a pending map focus on unmount', () => {
-      const props = makeProps({ appState: openPanelState })
-      const { rerender, unmount } = render(<DatasetsInit {...props} />)
-      panelEl.focus()
-      rerender(<DatasetsInit {...props} pluginState={makePluginState()} />)
-      unmount()
-      act(() => jest.runOnlyPendingTimers())
-      expect(props.services.focusMap).not.toHaveBeenCalled()
-    })
   })
 
   // ─── initialisation ──────────────────────────────────────────────────────────
diff --git a/plugins/draw/src/api/editFeature.js b/plugins/draw/src/api/editFeature.js
index 974897560..2543aa8b1 100644
--- a/plugins/draw/src/api/editFeature.js
+++ b/plugins/draw/src/api/editFeature.js
@@ -1,4 +1,3 @@
-import { MAP_SIZE_SCALES } from '../defaults.js'
 import { validateGeometry } from '../validation/validateGeometry.js'
 
 export const editFeature = ({ appState, appConfig, mapState, pluginConfig, pluginState, mapProvider, services }, featureId, options = {}) => {
@@ -34,7 +33,7 @@ export const editFeature = ({ appState, appConfig, mapState, pluginConfig, plugi
     undoButtonId: `${appConfig.id}-draw-undo`,
     isPanEnabled: appState.interfaceType !== 'keyboard',
     interfaceType: appState.interfaceType,
-    scale: MAP_SIZE_SCALES[mapState.mapSize],
+    scale: mapState.mapSizeScale,
     featureId,
     getSnapEnabled: () => draw.isSnapEnabled()
   })
diff --git a/plugins/draw/src/api/editFeature.test.js b/plugins/draw/src/api/editFeature.test.js
index 9ec3a41c0..202973f4c 100644
--- a/plugins/draw/src/api/editFeature.test.js
+++ b/plugins/draw/src/api/editFeature.test.js
@@ -1,7 +1,5 @@
 import { editFeature } from './editFeature.js'
 
-jest.mock('../defaults.js', () => ({ MAP_SIZE_SCALES: { medium: 1.5, large: 2 } }))
-
 const makeContext = (overrides = {}) => {
   const dispatch = jest.fn()
   const eventBus = { emit: jest.fn() }
@@ -14,7 +12,7 @@ const makeContext = (overrides = {}) => {
   const context = {
     appState: { layoutRefs: { viewportRef: { current: 'viewport' } }, interfaceType: 'mouse' },
     appConfig: { id: 'app' },
-    mapState: { mapSize: 'medium' },
+    mapState: { mapSizeScale: 1.5 },
     pluginConfig: { snapLayers: ['pc-layer'] },
     pluginState: { dispatch },
     mapProvider: { draw },
diff --git a/plugins/draw/src/events.js b/plugins/draw/src/events.js
index 19c49b9b4..c911e99ce 100644
--- a/plugins/draw/src/events.js
+++ b/plugins/draw/src/events.js
@@ -8,7 +8,6 @@
 import { ADAPTER_EVENTS } from './adapterEvents.js'
 import { validateGeometry } from './validation/validateGeometry.js'
 import { MIN_VERTICES_REASONS } from './validation/rules.js'
-import { MAP_SIZE_SCALES } from './defaults.js'
 import { stripInternalProperties } from './utils/stripInternalProperties.js'
 
 const EDIT_VERTEX_MODE = 'edit_vertex'
@@ -68,7 +67,7 @@ const enterEditVertexMode = ({ draw, appState, appConfig, mapState, dispatch },
     undoButtonId: `${appConfig?.id}-draw-undo`,
     isPanEnabled: appState?.interfaceType !== 'keyboard',
     interfaceType: appState?.interfaceType,
-    scale: MAP_SIZE_SCALES[mapState?.mapSize],
+    scale: mapState?.mapSizeScale,
     featureId,
     getSnapEnabled: () => draw.isSnapEnabled()
   })
diff --git a/plugins/draw/src/events.test.js b/plugins/draw/src/events.test.js
index e119b3dd0..36410a639 100644
--- a/plugins/draw/src/events.test.js
+++ b/plugins/draw/src/events.test.js
@@ -30,7 +30,7 @@ const setup = (overrides = {}) => {
   const buttonConfig = { drawDone: {}, drawCancel: {}, drawUndo: {}, drawDeletePoint: {}, drawSnap: {}, ...overrides.buttonConfig }
   const appState = { layoutRefs: { viewportRef: { current: 'viewport' } }, interfaceType: 'mouse' }
   const appConfig = { id: 'app' }
-  const mapState = { mapSize: 'medium' }
+  const mapState = { mapSizeScale: 1.5 }
 
   const detach = attachEvents({ appState, appConfig, mapState, pluginState, mapProvider, buttonConfig, eventBus, hints })
   return { draw, dispatch, pluginState, mapProvider, eventBus, hints, buttonConfig, detach }
diff --git a/plugins/draw/src/hooks/useSpatialList.js b/plugins/draw/src/hooks/useSpatialList.js
index 304f60186..8636da9b3 100644
--- a/plugins/draw/src/hooks/useSpatialList.js
+++ b/plugins/draw/src/hooks/useSpatialList.js
@@ -1,6 +1,5 @@
 import { useEffect, useRef } from 'react'
 import { EVENTS } from '../../../../src/config/events.js'
-import { scaleFactor } from '../../../../src/config/appConfig.js'
 import { ADAPTER_EVENTS } from '../adapterEvents.js'
 
 const EDIT_VERTEX_MODE = 'edit_vertex'
@@ -9,9 +8,9 @@ const DRAW_PROVIDER_ID = 'draw'
 // Mirrors interact's own projectToScreen (plugins/interact/src/hooks/useSpatialList.js) —
 // mapProvider.mapToScreen is the provider-agnostic projection every mapProvider implements,
 // not any adapter-internal pixel conversion.
-const projectToScreen = (mapProvider, mapSize, coord) => {
+const projectToScreen = (mapProvider, mapSizeScale, coord) => {
   const { x, y } = mapProvider.mapToScreen(coord)
-  return { x: x * scaleFactor[mapSize], y: y * scaleFactor[mapSize] }
+  return { x: x * mapSizeScale, y: y * mapSizeScale }
 }
 
 // ids stay flat vertices-then-midpoints indices — matches the mode's own selectedVertexIndex
@@ -21,13 +20,13 @@ const projectToScreen = (mapProvider, mapSize, coord) => {
 // N and M" label (and this interleave) only reads correctly for a single ring/part (the
 // common case); a shape with holes or multiple parts would need ring-aware numbering to stay
 // accurate, not done here.
-const buildVertexItems = (mapProvider, mapSize) => {
+const buildVertexItems = (mapProvider, mapSizeScale) => {
   const { vertices, midpoints } = mapProvider.draw?.getVertexItems?.() ?? { vertices: [], midpoints: [] }
   const toVertexItem = (coord, i) => ({
     id: String(i),
     label: `Point ${i + 1}`,
     isMidpoint: false,
-    ...projectToScreen(mapProvider, mapSize, coord)
+    ...projectToScreen(mapProvider, mapSizeScale, coord)
   })
   const toMidpointItem = (coord, i) => ({
     id: String(vertices.length + i),
@@ -35,7 +34,7 @@ const buildVertexItems = (mapProvider, mapSize) => {
     // "Insert point between N and M" was long enough to lose.
     label: `Insert ${i + 1}-${((i + 1) % vertices.length) + 1}`,
     isMidpoint: true,
-    ...projectToScreen(mapProvider, mapSize, coord)
+    ...projectToScreen(mapProvider, mapSizeScale, coord)
   })
   const items = []
   vertices.forEach((coord, i) => {
@@ -57,10 +56,10 @@ const buildVertexItems = (mapProvider, mapSize) => {
  * meanwhile, restored automatically once the claim is released) rather than contributing
  * additively like interact does.
  */
-function useVertexItemSync ({ pluginState, mapProvider, mapSize, spatialListRegistry, itemsRef, eventBus }) {
+function useVertexItemSync ({ pluginState, mapProvider, mapSizeScale, spatialListRegistry, itemsRef, eventBus }) {
   useEffect(() => {
     const rebuild = () => {
-      itemsRef.current = pluginState.mode === EDIT_VERTEX_MODE ? buildVertexItems(mapProvider, mapSize) : []
+      itemsRef.current = pluginState.mode === EDIT_VERTEX_MODE ? buildVertexItems(mapProvider, mapSizeScale) : []
       spatialListRegistry.notifyItemsChanged(DRAW_PROVIDER_ID)
     }
     rebuild()
@@ -74,7 +73,7 @@ function useVertexItemSync ({ pluginState, mapProvider, mapSize, spatialListRegi
       eventBus.off(EVENTS.MAP_MOVE_END, rebuild)
       draw.off(ADAPTER_EVENTS.UPDATE, rebuild)
     }
-  }, [pluginState.mode, mapProvider, mapSize, spatialListRegistry, itemsRef, eventBus])
+  }, [pluginState.mode, mapProvider, mapSizeScale, spatialListRegistry, itemsRef, eventBus])
 
   // Registers once, for the lifetime of the hook — safe outside edit_vertex too, since an
   // exclusive-capable provider only ever contributes while it holds the claim (see
@@ -170,11 +169,11 @@ function useConfirmHandler ({ eventBus, mapProvider, pluginState, activeIdRef, i
  * @param {{ mapState: object, pluginState: object, services: object, mapProvider: object, spatialListRegistry: object, viewportRef: React.RefObject }} params
  */
 export function useSpatialList ({ mapState, pluginState, services, mapProvider, spatialListRegistry, viewportRef }) {
-  const { mapSize } = mapState
+  const { mapSizeScale } = mapState
   const { eventBus, announce } = services
   const itemsRef = useRef([])
   const activeIdRef = useRef(null)
-  useVertexItemSync({ pluginState, mapProvider, mapSize, spatialListRegistry, itemsRef, eventBus })
+  useVertexItemSync({ pluginState, mapProvider, mapSizeScale, spatialListRegistry, itemsRef, eventBus })
   useActiveVertexHandler({ eventBus, mapProvider, pluginState, activeIdRef })
   useConfirmHandler({ eventBus, mapProvider, pluginState, activeIdRef, itemsRef, viewportRef, announce })
 }
diff --git a/plugins/draw/src/hooks/useSpatialList.test.js b/plugins/draw/src/hooks/useSpatialList.test.js
index 9ce9431e1..8984b3ad1 100644
--- a/plugins/draw/src/hooks/useSpatialList.test.js
+++ b/plugins/draw/src/hooks/useSpatialList.test.js
@@ -41,7 +41,7 @@ const makeMapProvider = (draw) => ({
 
 const makeViewportRef = () => ({ current: { focus: jest.fn() } })
 
-const setup = ({ mode = 'edit_vertex', draw, eventBus, mapSize = 'small', registry, viewportRef, announce } = {}) => {
+const setup = ({ mode = 'edit_vertex', draw, eventBus, mapSizeScale = 1, registry, viewportRef, announce } = {}) => {
   const eb = eventBus ?? makeEventBus()
   const adapter = draw ?? makeDrawAdapter()
   const mp = makeMapProvider(adapter)
@@ -53,7 +53,7 @@ const setup = ({ mode = 'edit_vertex', draw, eventBus, mapSize = 'small', regist
   const spatialListRegistry = registry ?? createSpatialListRegistry({ eventBus: eb })
   const { result, unmount, rerender } = renderHook(
     ({ mode }) => useSpatialList({
-      mapState: { mapSize },
+      mapState: { mapSizeScale },
       pluginState: { mode },
       services: { eventBus: eb, announce: announceSpy },
       mapProvider: mp,
@@ -97,7 +97,7 @@ describe('useSpatialList — lifecycle', () => {
     const eb = makeEventBus()
     const mp = { draw: null, mapToScreen: jest.fn() }
     expect(() => renderHook(() => useSpatialList({
-      mapState: { mapSize: 'small' },
+      mapState: { mapSizeScale: 1 },
       pluginState: { mode: 'edit_vertex' },
       services: { eventBus: eb },
       mapProvider: mp,
diff --git a/plugins/interact/src/hooks/useInteractionHandlers.js b/plugins/interact/src/hooks/useInteractionHandlers.js
index 34a6897df..1ae269de6 100755
--- a/plugins/interact/src/hooks/useInteractionHandlers.js
+++ b/plugins/interact/src/hooks/useInteractionHandlers.js
@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react'
 import { areAllContiguous, isContiguousWithAny } from '../utils/spatial.js'
 import { getFeaturesAtPoint, findMatchingFeature, buildLayerConfigMap } from '../utils/featureQueries.js'
-import { scaleFactor } from '../../../../src/config/appConfig.js'
 import { isStandaloneLabel } from '../../../../src/utils/symbolUtils.js'
 
 /**
@@ -13,7 +12,7 @@ import { isStandaloneLabel } from '../../../../src/utils/symbolUtils.js'
  *
  * @param {Object} markers - markers object from mapState (has .items and .markerRefs)
  * @param {{ x: number, y: number }} point - container-relative pixel coordinates
- * @param {number} scale - scaleFactor for the current mapSize (e.g. 1.5 for medium)
+ * @param {number} scale - mapState.mapSizeScale (e.g. 1.5 for medium)
  * @returns {string|null}
  */
 const findMarkerAtPoint = (markers, point, scale) => {
@@ -178,7 +177,7 @@ const logDebugFeatures = (coords, features) => {
  * marker hit-testing is never performed.
  *
  * @param {Object} deps
- * @param {Object} deps.mapState - Map state including markers and mapSize
+ * @param {Object} deps.mapState - Map state including markers and mapSizeScale
  * @param {Object} deps.pluginState - Plugin state including interactionModes, layers, etc.
  * @param {Object} deps.services - Services including eventBus
  * @param {Object} deps.mapProvider - Map provider instance for feature queries
@@ -210,7 +209,7 @@ const useHandleInteraction = ({ mapProvider, layers, interactionModes, multiSele
 }
 
 export const useInteractionHandlers = ({ mapState, pluginState, services, mapProvider }) => {
-  const { markers, mapSize } = mapState
+  const { markers, mapSizeScale: scale } = mapState
   const {
     dispatch, layers, interactionModes, multiSelect, contiguous,
     marker: markerOptions, tolerance, selectedFeatures, selectedMarkers,
@@ -218,7 +217,6 @@ export const useInteractionHandlers = ({ mapState, pluginState, services, mapPro
   } = pluginState
   const { eventBus } = services
   const layerConfigMap = buildLayerConfigMap(layers)
-  const scale = scaleFactor[mapSize] ?? 1
 
   const processFeatureMatch = useCallback(({ feature, config }) => {
     markers.remove('location')
diff --git a/plugins/interact/src/hooks/useInteractionHandlers.test.js b/plugins/interact/src/hooks/useInteractionHandlers.test.js
index f583ec9f6..ba9f9b91a 100644
--- a/plugins/interact/src/hooks/useInteractionHandlers.test.js
+++ b/plugins/interact/src/hooks/useInteractionHandlers.test.js
@@ -55,7 +55,8 @@ const makeMarkerEl = (rect) => ({
 const setup = (pluginOverrides = {}, markerItems = [], markerRefs = new Map()) => {
   const deps = {
     mapState: {
-      markers: { add: jest.fn(), remove: jest.fn(), items: markerItems, markerRefs }
+      markers: { add: jest.fn(), remove: jest.fn(), items: markerItems, markerRefs },
+      mapSizeScale: 1
     },
     pluginState: {
       dispatch: jest.fn(),
@@ -346,7 +347,7 @@ it('does not check markers when selectMarker is not in interactionModes', () =>
 
 it('emits selectionchange when features are selected', () => {
   const deps = {
-    mapState: { markers: { add: jest.fn(), remove: jest.fn(), items: [], markerRefs: new Map() } },
+    mapState: { markers: { add: jest.fn(), remove: jest.fn(), items: [], markerRefs: new Map() }, mapSizeScale: 1 },
     pluginState: {
       selectedFeatures: [{ featureId: 'F1', layerId: 'l1', idProperty: 'id', properties: { name: 'A' }, geometry: { type: 'Point', coordinates: [0, 0] } }],
       selectedMarkers: []
@@ -373,7 +374,7 @@ it('skips emission when selection remains empty after being cleared', () => {
   // 1. First render with a feature (prev is null, emission happens)
   const { rerender } = renderHook(
     ({ features }) => useInteractionHandlers({
-      mapState: { markers: { items: [], markerRefs: new Map() } },
+      mapState: { markers: { items: [], markerRefs: new Map() }, mapSizeScale: 1 },
       pluginState: { selectedFeatures: features, selectedMarkers: [] },
       services: { eventBus },
       mapProvider: { getFeatureGeometry: jest.fn(() => null) }
diff --git a/plugins/interact/src/hooks/useSpatialList.js b/plugins/interact/src/hooks/useSpatialList.js
index 319a2dae1..fade34e49 100644
--- a/plugins/interact/src/hooks/useSpatialList.js
+++ b/plugins/interact/src/hooks/useSpatialList.js
@@ -1,7 +1,6 @@
 import { useEffect, useRef } from 'react'
 import { EVENTS } from '../../../../src/config/events.js'
 import { isStandaloneLabel } from '../../../../src/utils/symbolUtils.js'
-import { scaleFactor } from '../../../../src/config/appConfig.js'
 import { buildLayerConfigMap } from '../utils/featureQueries.js'
 import { getGeometryCenter } from '../utils/spatial.js'
 
@@ -21,14 +20,14 @@ const isInViewport = (el) => {
     bottom > containerRect.top && top < containerRect.bottom
 }
 
-// Screen position for a [lng, lat] point, scaled for the current mapSize — same correction
+// Screen position for a [lng, lat] point, scaled for the current map size — same correction
 // useMarkersAPI.js's projectCoords applies (the map canvas itself is rendered at a different
-// resolution per mapSize; nothing to do with CSS transforms). mapProvider.mapToScreen is a
+// resolution per map size; nothing to do with CSS transforms). mapProvider.mapToScreen is a
 // provider-agnostic method (implemented by every provider, including OpenLayers/Esri), so this
 // helper works unchanged once OpenLayers' getVisibleFeatures stops being a stub.
-const projectToScreen = (mapProvider, mapSize, coords) => {
+const projectToScreen = (mapProvider, mapSizeScale, coords) => {
   const { x, y } = mapProvider.mapToScreen(coords)
-  return { x: x * scaleFactor[mapSize], y: y * scaleFactor[mapSize] }
+  return { x: x * mapSizeScale, y: y * mapSizeScale }
 }
 
 // x/y are the marker's own screen position — computed fresh here rather than read off
@@ -36,7 +35,7 @@ const projectToScreen = (mapProvider, mapSize, coords) => {
 // current pan position. Used to position the corresponding accessible list item so touch/voice
 // AT overlays (e.g. macOS Voice Control's "Show Numbers") land on the actual feature instead of
 // stacking at the top-left of the viewport.
-const collectVisibleMarkers = (markers, mapProvider, mapSize) => {
+const collectVisibleMarkers = (markers, mapProvider, mapSizeScale) => {
   const items = []
   for (const marker of markers.items) {
     if (!marker.label) { continue }
@@ -44,7 +43,7 @@ const collectVisibleMarkers = (markers, mapProvider, mapSize) => {
     if (!isStandaloneLabel(marker) && el && isInViewport(el)) {
       const item = { id: marker.id, label: marker.label, isMarker: true }
       if (marker.coords) {
-        Object.assign(item, projectToScreen(mapProvider, mapSize, marker.coords))
+        Object.assign(item, projectToScreen(mapProvider, mapSizeScale, marker.coords))
       }
       items.push(item)
     }
@@ -52,7 +51,7 @@ const collectVisibleMarkers = (markers, mapProvider, mapSize) => {
   return items
 }
 
-const toFeatureItem = (feature, layerConfigMap, seenIds, mapProvider, mapSize) => {
+const toFeatureItem = (feature, layerConfigMap, seenIds, mapProvider, mapSizeScale) => {
   const config = layerConfigMap[feature.layer?.id]
   if (!config?.labelProperty) {
     return null
@@ -84,19 +83,19 @@ const toFeatureItem = (feature, layerConfigMap, seenIds, mapProvider, mapSize) =
   // geometry (e.g. OpenLayers' getVisibleFeatures, currently a stub returning [] — see PR notes).
   const center = getGeometryCenter(feature)
   if (center) {
-    Object.assign(item, projectToScreen(mapProvider, mapSize, center))
+    Object.assign(item, projectToScreen(mapProvider, mapSizeScale, center))
   }
   return item
 }
 
-const collectVisibleFeatures = (mapProvider, layers, mapSize) => {
+const collectVisibleFeatures = (mapProvider, layers, mapSizeScale) => {
   const items = []
   const seenIds = new Set()
   const layerIds = layers.map(layer => layer.layerId)
   const layerConfigMap = buildLayerConfigMap(layers)
   const features = mapProvider.getVisibleFeatures(layerIds)
   for (const feature of features) {
-    const item = toFeatureItem(feature, layerConfigMap, seenIds, mapProvider, mapSize)
+    const item = toFeatureItem(feature, layerConfigMap, seenIds, mapProvider, mapSizeScale)
     if (item) {
       items.push(item)
     }
@@ -118,7 +117,7 @@ const collectVisibleFeatures = (mapProvider, layers, mapSize) => {
  * own doc comment for why: a single "whoever emits last wins" event doesn't scale once more
  * than one plugin, e.g. draw mid-edit, needs to contribute to or take over the same list).
  */
-function useItemListSync ({ markers, mapSize, interactionModes, layers, mapProvider, multiSelect, spatialListRegistry, eventBus, itemsRef }) {
+function useItemListSync ({ markers, mapSizeScale, interactionModes, layers, mapProvider, multiSelect, spatialListRegistry, eventBus, itemsRef }) {
   const multiSelectRef = useRef(multiSelect)
   multiSelectRef.current = multiSelect // always-current for the provider's getItems below, same convention as itemsRef
 
@@ -126,10 +125,10 @@ function useItemListSync ({ markers, mapSize, interactionModes, layers, mapProvi
     const handleMoveEnd = () => {
       const items = []
       if (interactionModes?.includes('selectMarker')) {
-        items.push(...collectVisibleMarkers(markers, mapProvider, mapSize))
+        items.push(...collectVisibleMarkers(markers, mapProvider, mapSizeScale))
       }
       if (interactionModes?.includes('selectFeature') && layers.length > 0) {
-        items.push(...collectVisibleFeatures(mapProvider, layers, mapSize))
+        items.push(...collectVisibleFeatures(mapProvider, layers, mapSizeScale))
       }
       itemsRef.current = items
       spatialListRegistry.notifyItemsChanged('interact')
@@ -141,7 +140,7 @@ function useItemListSync ({ markers, mapSize, interactionModes, layers, mapProvi
       eventBus.off(EVENTS.MAP_MOVE_END, handleMoveEnd)
       eventBus.off(EVENTS.MAP_DATA_CHANGE, handleMoveEnd)
     }
-  }, [markers, mapSize, interactionModes, layers, mapProvider, multiSelect, spatialListRegistry, eventBus, itemsRef])
+  }, [markers, mapSizeScale, interactionModes, layers, mapProvider, multiSelect, spatialListRegistry, eventBus, itemsRef])
 
   // Registers once, for the lifetime of the hook — getItems reads itemsRef/multiSelectRef
   // fresh on every call, so there's never a need to re-register just because a prop changed;
@@ -240,12 +239,12 @@ function useSelectItemHandler ({ eventBus, dispatch, listboxActiveItemRef, multi
  * @param {{ mapState: object, pluginState: object, services: object, mapProvider: object, spatialListRegistry: object }} params
  */
 export function useSpatialList ({ mapState, pluginState, services, mapProvider, spatialListRegistry }) {
-  const { markers, mapSize } = mapState
+  const { markers, mapSizeScale } = mapState
   const { dispatch, interactionModes, layers, multiSelect } = pluginState
   const { eventBus } = services
   const listboxActiveItemRef = useRef(null)
   const itemsRef = useRef([])
-  useItemListSync({ markers, mapSize, interactionModes, layers, mapProvider, multiSelect, spatialListRegistry, eventBus, itemsRef })
+  useItemListSync({ markers, mapSizeScale, interactionModes, layers, mapProvider, multiSelect, spatialListRegistry, eventBus, itemsRef })
   useActiveItemHandler({ itemsRef, eventBus, dispatch, listboxActiveItemRef })
   useSelectItemHandler({ eventBus, dispatch, listboxActiveItemRef, multiSelect })
 }
diff --git a/plugins/interact/src/hooks/useSpatialList.test.js b/plugins/interact/src/hooks/useSpatialList.test.js
index ac5c413bb..f205c5e95 100644
--- a/plugins/interact/src/hooks/useSpatialList.test.js
+++ b/plugins/interact/src/hooks/useSpatialList.test.js
@@ -54,7 +54,7 @@ const makeMapProvider = (features = []) => ({
   mapToScreen: jest.fn(() => ({ x: 10, y: 20 }))
 })
 
-const setup = ({ interactionModes = [], markers, layers = [], mapProvider, eventBus, dispatch, multiSelect = false, mapSize = 'small' } = {}) => {
+const setup = ({ interactionModes = [], markers, layers = [], mapProvider, eventBus, dispatch, multiSelect = false, mapSizeScale = 1 } = {}) => {
   const eb = eventBus ?? makeEventBus()
   const mp = mapProvider ?? makeMapProvider()
   const dp = dispatch ?? jest.fn()
@@ -65,7 +65,7 @@ const setup = ({ interactionModes = [], markers, layers = [], mapProvider, event
   // spatialListRegistry.test.js.
   const spatialListRegistry = createSpatialListRegistry({ eventBus: eb })
   const { result, unmount } = renderHook(() => useSpatialList({
-    mapState: { markers: markers ?? makeMarkers(), mapSize },
+    mapState: { markers: markers ?? makeMarkers(), mapSizeScale },
     pluginState: { interactionModes, layers, dispatch: dp, multiSelect },
     services: { eventBus: eb },
     mapProvider: mp,
@@ -97,7 +97,7 @@ describe('useSpatialList — lifecycle', () => {
     const spatialListRegistry = createSpatialListRegistry({ eventBus: eb })
     const registerSpy = jest.spyOn(spatialListRegistry, 'registerItemProvider')
     const { unmount } = renderHook(() => useSpatialList({
-      mapState: { markers: makeMarkers(), mapSize: 'small' },
+      mapState: { markers: makeMarkers(), mapSizeScale: 1 },
       pluginState: { interactionModes: [], layers: [], dispatch: jest.fn(), multiSelect: false },
       services: { eventBus: eb },
       mapProvider: makeMapProvider(),
@@ -252,19 +252,19 @@ describe('useSpatialList — selectMarker mode', () => {
     container.remove()
   })
 
-  it('includes x/y screen position, scaled for mapSize, when the marker has coords', () => {
+  it('includes x/y screen position, scaled for mapSizeScale, when the marker has coords', () => {
     const { el, container } = makeMarkerEl({ inViewport: true })
     const markers = makeMarkers([{ id: 'm1', label: MARKER_LABEL, symbol: 'pin', isVisible: true, coords: [-2.4, 54.5] }])
     markers.markerRefs.set('m1', el)
     const mp = makeMapProvider()
     mp.mapToScreen.mockReturnValue({ x: 100, y: 200 })
 
-    const { eb } = setup({ interactionModes: ['selectMarker'], markers, mapProvider: mp, mapSize: 'medium' })
+    const { eb } = setup({ interactionModes: ['selectMarker'], markers, mapProvider: mp, mapSizeScale: 1.5 })
     act(() => eb.emit(MOVE_END, {}))
 
     expect(mp.mapToScreen).toHaveBeenCalledWith([-2.4, 54.5])
     expect(eb.emit).toHaveBeenCalledWith(SET_FEATURES, {
-      items: [markerItem({ id: 'm1', label: MARKER_LABEL, x: 150, y: 300 })], multiselectable: false, label: 'Map features' // scaleFactor.medium = 1.5
+      items: [markerItem({ id: 'm1', label: MARKER_LABEL, x: 150, y: 300 })], multiselectable: false, label: 'Map features'
     })
     container.remove()
   })
@@ -375,7 +375,7 @@ describe('useSpatialList — selectFeature mode: label resolution', () => {
     })
   })
 
-  it('includes x/y at the bbox centre of the feature geometry, scaled for mapSize', () => {
+  it('includes x/y at the bbox centre of the feature geometry, scaled for mapSizeScale', () => {
     const features = [{
       layer: { id: 'roads' },
       properties: { road_id: '1', road_name: 'High Street' },
@@ -384,12 +384,12 @@ describe('useSpatialList — selectFeature mode: label resolution', () => {
     const mp = makeMapProvider(features)
     mp.mapToScreen.mockReturnValue({ x: 100, y: 200 })
 
-    const { eb } = setup({ interactionModes: ['selectFeature'], layers, mapProvider: mp, mapSize: 'medium' })
+    const { eb } = setup({ interactionModes: ['selectFeature'], layers, mapProvider: mp, mapSizeScale: 1.5 })
     act(() => eb.emit(MOVE_END, {}))
 
     expect(mp.mapToScreen).toHaveBeenCalledWith([2, 1]) // bbox centre of the polygon above
     expect(eb.emit).toHaveBeenCalledWith(SET_FEATURES, {
-      items: [featureItem({ id: '1', label: 'High Street', x: 150, y: 300 })], multiselectable: false, label: 'Map features' // scaleFactor.medium = 1.5
+      items: [featureItem({ id: '1', label: 'High Street', x: 150, y: 300 })], multiselectable: false, label: 'Map features'
     })
   })
 
diff --git a/plugins/map-styles/src/MapStyles.jsx b/plugins/map-styles/src/MapStyles.jsx
index 98acede2f..d15d646ef 100755
--- a/plugins/map-styles/src/MapStyles.jsx
+++ b/plugins/map-styles/src/MapStyles.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { EVENTS } from '../../../src/config/events.js'
 import { textSizeSvgPath } from './config.js'
-import { scaleFactor } from '../../../src/config/appConfig.js'
+import { scaleFactor } from '../../../src/config/mapSizeScales.js'
 
 export const MapStyles = ({ mapState, pluginConfig, services, mapProvider }) => {
   const { mapStyle: currentMapStyle, mapSize: currentMapSize } = mapState
@@ -42,7 +42,7 @@ export const MapStyles = ({ mapState, pluginConfig, services, mapProvider }) =>
               <div className='im-c-map-styles__item' key={size}>
                 <button className='im-c-map-styles__button' onClick={() => handleMapSizeClick(size)} aria-pressed={size === currentMapSize}>
                   <div className='im-c-map-styles__image'>
-                    <svg width='60' height='60' viewBox='0 0 60 60' fillRule='evenodd'>
+                    <svg width='60' height='60' viewBox='0 0 60 60' fillRule='evenodd' aria-hidden='true'>
                       <rect className='im-c-map-styles__image-bg' width='100%' height='100%' />
                       <g style={{ transform: `scale(${scaleFactor[size]})`, transformOrigin: '8px 52px' }}>
                         <path d={textSizeSvgPath} />
diff --git a/src/App/components/Markers/Markers.jsx b/src/App/components/Markers/Markers.jsx
index f65e45a5b..01ee991c1 100755
--- a/src/App/components/Markers/Markers.jsx
+++ b/src/App/components/Markers/Markers.jsx
@@ -4,7 +4,6 @@ import { useMarkerCursor } from '../../hooks/useMarkerCursor.js'
 import { useConfig } from '../../store/configContext.js'
 import { useMap } from '../../store/mapContext.js'
 import { useService } from '../../store/serviceContext.js'
-import { scaleFactor } from '../../../config/appConfig.js'
 import { isStandaloneLabel } from '../../../utils/symbolUtils.js'
 import { DEFAULT_SYMBOL_ANCHOR, DEFAULT_SYMBOL_VIEWBOX } from '../../../config/symbolConfig.js'
 import { EVENTS } from '../../../config/events.js'
@@ -25,7 +24,7 @@ const markerVariant = (isSelected, isActive) => {
 
 // The marker's definition carries the viewBox and anchor for its size (see
 // symbolRegistry.getMarkerSymbolDef)
-const resolveSymbolProps = (marker, defaults, symbolRegistry, mapStyle, mapSize, variant) => {
+const resolveSymbolProps = (marker, defaults, symbolRegistry, mapStyle, scale, variant) => {
   const symbolDef = symbolRegistry.getMarkerSymbolDef(marker)
   const styleValues = Object.fromEntries(
     Object.entries(marker).filter(([k]) => !INTERNAL_KEYS.has(k))
@@ -35,7 +34,6 @@ const resolveSymbolProps = (marker, defaults, symbolRegistry, mapStyle, mapSize,
   const [,, svgWidth, svgHeight] = viewBox.split(' ').map(Number)
   const anchor = symbolDef?.anchor ?? DEFAULT_SYMBOL_ANCHOR
   const shapeId = marker.symbol || defaults.symbol
-  const scale = scaleFactor[mapSize] ?? 1
   return { resolvedSvg, viewBox, anchor, shapeId, scaledWidth: svgWidth * scale, scaledHeight: svgHeight * scale }
 }
 
@@ -43,7 +41,7 @@ const resolveSymbolProps = (marker, defaults, symbolRegistry, mapStyle, mapSize,
 // sonarjs/disable-next-line function-name
 export const Markers = () => {
   const { id } = useConfig()
-  const { mapStyle, mapSize } = useMap()
+  const { mapStyle, mapSizeScale } = useMap()
   const { markers, markerRef } = useMarkers()
   const { symbolRegistry, eventBus } = useService()
 
@@ -89,7 +87,7 @@ export const Markers = () => {
           return <LabelMarker key={marker.id} marker={marker} mapId={id} markerRef={markerRef} />
         }
 
-        const symbolProps = resolveSymbolProps(marker, defaults, symbolRegistry, mapStyle, mapSize, markerVariant(isSelected, isActive))
+        const symbolProps = resolveSymbolProps(marker, defaults, symbolRegistry, mapStyle, mapSizeScale, markerVariant(isSelected, isActive))
 
         if (marker.showLabel && marker.label) {
           return <SymbolLabelMarker key={marker.id} marker={marker} mapId={id} markerRef={markerRef} isSelected={isSelected} symbolProps={symbolProps} />
diff --git a/src/App/components/Markers/Markers.test.jsx b/src/App/components/Markers/Markers.test.jsx
index 5438f9ea5..dcb13b56e 100644
--- a/src/App/components/Markers/Markers.test.jsx
+++ b/src/App/components/Markers/Markers.test.jsx
@@ -9,7 +9,6 @@ jest.mock('../../hooks/useMarkersAPI.js', () => ({ useMarkers: jest.fn() }))
 jest.mock('../../store/configContext.js', () => ({ useConfig: jest.fn() }))
 jest.mock('../../store/mapContext.js', () => ({ useMap: jest.fn() }))
 jest.mock('../../store/serviceContext.js', () => ({ useService: jest.fn() }))
-jest.mock('../../../config/appConfig.js', () => ({ scaleFactor: { small: 1, medium: 1.5, large: 2 } }))
 
 const MARKER_ID = 'marker-1'
 const SEL_CHANGE = 'interact:selectionchange'
@@ -38,12 +37,12 @@ const makeMarker = (overrides = {}) => ({
   id: MARKER_ID, isVisible: true, symbol: 'pin', ...overrides
 })
 
-const setup = ({ markers = [], mapSize = 'small', eventBus, symbolRegistry, mapStyle = 'outdoor' } = {}) => {
+const setup = ({ markers = [], mapSizeScale = 1, eventBus, symbolRegistry, mapStyle = 'outdoor' } = {}) => {
   const eb = eventBus ?? makeEventBus()
   const sr = symbolRegistry ?? makeSymbolRegistry()
   const markerRefs = new Map()
   useConfig.mockReturnValue({ id: 'test-app' })
-  useMap.mockReturnValue({ mapStyle, mapSize })
+  useMap.mockReturnValue({ mapStyle, mapSizeScale })
   useService.mockReturnValue({ symbolRegistry: sr, eventBus: eb })
   useMarkers.mockReturnValue({
     markers: { items: markers, markerRefs },
@@ -130,18 +129,17 @@ describe('Markers — symbol resolution', () => {
   })
 
   it.each([
-    ['small', '38', '38'],
-    ['medium', '57', '57'],
-    ['large', '76', '76'],
-    ['huge', '38', '38']
-  ])('scales svg dimensions for mapSize=%s', (mapSize, width, height) => {
-    const svg = setup({ markers: [makeMarker()], mapSize }).result.container.querySelector(SVG_SEL)
+    [1, '38', '38'],
+    [1.5, '57', '57'],
+    [2, '76', '76']
+  ])('scales svg dimensions for mapSizeScale=%s', (mapSizeScale, width, height) => {
+    const svg = setup({ markers: [makeMarker()], mapSizeScale }).result.container.querySelector(SVG_SEL)
     expect(svg.getAttribute('width')).toBe(width)
     expect(svg.getAttribute('height')).toBe(height)
   })
 
-  it('scales anchor offsets for medium mapSize', () => {
-    expect(setup({ markers: [makeMarker()], mapSize: 'medium' }).result.container.querySelector(SVG_SEL))
+  it('scales anchor offsets for a 1.5 mapSizeScale', () => {
+    expect(setup({ markers: [makeMarker()], mapSizeScale: 1.5 }).result.container.querySelector(SVG_SEL))
       .toHaveStyle({ marginLeft: '-28.5px', marginTop: '-57px' })
   })
 })
diff --git a/src/App/components/Panel/Panel.jsx b/src/App/components/Panel/Panel.jsx
index f1665b796..cd985313d 100755
--- a/src/App/components/Panel/Panel.jsx
+++ b/src/App/components/Panel/Panel.jsx
@@ -3,6 +3,7 @@ import { useConfig } from '../../store/configContext'
 import { useApp } from '../../store/appContext'
 import { stringToKebab } from '../../../utils/stringToKebab.js'
 import { getPanelElementId } from '../../../utils/getPanelElementId.js'
+import { focusAfterPanelClose } from '../../../utils/focusAfterPanelClose.js'
 import { useModalPanelBehaviour } from '../../hooks/useModalPanelBehaviour.js'
 import { useIsScrollable } from '../../hooks/useIsScrollable.js'
 import { classifyPanel, getPanelRole } from '../../../utils/getPanelRole.js'
@@ -121,15 +122,7 @@ export const Panel = ({ panelId, panelConfig, props, focusOnOpen, WrappedChild,
   const panelRef = rootRef || internalPanelRef
 
   const handleClose = () => {
-    requestAnimationFrame(() => {
-      // Re-checked here, not at handleClose-call time — the triggering element (a button, a
-      // Features-list item, ...) may have been removed from the DOM while the panel was open
-      // (e.g. the map panned and the feature it came from dropped out of the current list).
-      // document.contains() on a detached node is false, not a throw, so this is a plain check.
-      const triggeringElement = props?.triggeringElement
-      const focusTarget = triggeringElement && document.contains(triggeringElement) ? triggeringElement : layoutRefs.viewportRef.current
-      focusTarget?.focus?.({ preventScroll: interfaceType !== 'keyboard' })
-    })
+    focusAfterPanelClose({ triggeringElement: props?.triggeringElement, viewportRef: layoutRefs.viewportRef, interfaceType })
     dispatch({ type: 'CLOSE_PANEL', payload: panelId })
   }
 
diff --git a/src/App/hooks/useInterfaceAPI.js b/src/App/hooks/useInterfaceAPI.js
index b7fdf2e32..011fb0e30 100644
--- a/src/App/hooks/useInterfaceAPI.js
+++ b/src/App/hooks/useInterfaceAPI.js
@@ -3,6 +3,9 @@ import { useEffect, useRef } from 'react'
 import { EVENTS as events } from '../../config/events.js'
 import { useApp } from '../store/appContext.js'
 import { useService } from '../store/serviceContext.js'
+import { useConfig } from '../store/configContext.js'
+import { getPanelElementId } from '../../utils/getPanelElementId.js'
+import { focusAfterPanelClose } from '../../utils/focusAfterPanelClose.js'
 
 // Handlers for the public interface API events (addButton, showPanel, setApplicationMode, ...), as
 // [event, handler] pairs. They read dispatch and state through refs, so they're created once and
@@ -53,7 +56,15 @@ const createInterfaceSubscriptions = (dispatchRef, stateRef) => {
   const handleRemovePanel = (id) => dispatchRef.current({ type: 'REMOVE_PANEL', payload: id })
   const handleShowPanel = ({ id, focus = true, triggeringElement }) =>
     dispatchRef.current({ type: 'OPEN_PANEL', payload: { panelId: id, focusOnOpen: focus, props: triggeringElement ? { triggeringElement } : undefined } })
-  const handleHidePanel = (id) => dispatchRef.current({ type: 'CLOSE_PANEL', payload: id })
+  const handleHidePanel = (id) => {
+    const { appId, openPanels, layoutRefs, interfaceType } = stateRef.current
+    // Checked before closing: once the panel is hidden the browser moves focus to <body>
+    const panelEl = document.getElementById(getPanelElementId(appId, id))
+    if (panelEl?.contains(document.activeElement)) {
+      focusAfterPanelClose({ triggeringElement: openPanels[id]?.props?.triggeringElement, viewportRef: layoutRefs.viewportRef, interfaceType })
+    }
+    dispatchRef.current({ type: 'CLOSE_PANEL', payload: id })
+  }
   const handleAddControl = ({ id, config }) => dispatchRef.current({ type: 'ADD_CONTROL', payload: { id, config } })
   const handleSetApplicationMode = ({ id, include, exclude }) =>
     dispatchRef.current({ type: 'SET_APPLICATION_MODE', payload: { id, include, exclude } })
@@ -75,14 +86,15 @@ const createInterfaceSubscriptions = (dispatchRef, stateRef) => {
 }
 
 export const useInterfaceAPI = () => {
-  const { dispatch, hiddenButtons, disabledButtons, pressedButtons, expandedButtons } = useApp()
+  const { id: appId } = useConfig()
+  const { dispatch, hiddenButtons, disabledButtons, pressedButtons, expandedButtons, openPanels, layoutRefs, interfaceType } = useApp()
   const { eventBus } = useService()
 
   // Refs so event handlers always use the latest dispatch/state without re-subscribing
   const dispatchRef = useRef(dispatch)
-  const stateRef = useRef({ hiddenButtons, disabledButtons, pressedButtons, expandedButtons })
+  const stateRef = useRef(null)
   dispatchRef.current = dispatch
-  stateRef.current = { hiddenButtons, disabledButtons, pressedButtons, expandedButtons }
+  stateRef.current = { hiddenButtons, disabledButtons, pressedButtons, expandedButtons, appId, openPanels, layoutRefs, interfaceType }
 
   useEffect(() => {
     const subscriptions = createInterfaceSubscriptions(dispatchRef, stateRef)
diff --git a/src/App/hooks/useInterfaceAPI.test.js b/src/App/hooks/useInterfaceAPI.test.js
index 51c2e843d..9d75f8d0b 100644
--- a/src/App/hooks/useInterfaceAPI.test.js
+++ b/src/App/hooks/useInterfaceAPI.test.js
@@ -2,9 +2,11 @@ import { renderHook, act } from '@testing-library/react'
 import { useInterfaceAPI } from './useInterfaceAPI.js'
 import { useApp } from '../store/appContext.js'
 import { useService } from '../store/serviceContext.js'
+import { useConfig } from '../store/configContext.js'
 
 jest.mock('../store/appContext.js')
 jest.mock('../store/serviceContext.js')
+jest.mock('../store/configContext.js')
 
 const makeEventBus = () => {
   const handlers = {}
@@ -26,11 +28,15 @@ describe('useInterfaceAPI', () => {
       hiddenButtons: new Set(),
       disabledButtons: new Set(),
       pressedButtons: new Set(),
-      expandedButtons: new Set()
+      expandedButtons: new Set(),
+      openPanels: {},
+      layoutRefs: { viewportRef: { current: { focus: jest.fn() } } },
+      interfaceType: 'keyboard'
     }
 
     useApp.mockReturnValue({ dispatch: mockDispatch, ...mockState })
     useService.mockReturnValue({ eventBus: mockEventBus })
+    useConfig.mockReturnValue({ id: 'map' })
   })
 
   it('sets a mode on app:setapplicationmode', () => {
@@ -122,6 +128,65 @@ describe('useInterfaceAPI', () => {
     expect(mockDispatch).toHaveBeenCalledWith({ type: 'CLOSE_PANEL', payload: 'panel1' })
   })
 
+  describe('focus on app:hidepanel', () => {
+    let panelEl, panelButton, triggeringElement, outsideButton
+
+    beforeEach(() => {
+      jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb())
+      panelEl = document.createElement('div')
+      panelEl.id = 'map-panel-panel1'
+      panelButton = panelEl.appendChild(document.createElement('button'))
+      triggeringElement = document.createElement('button')
+      outsideButton = document.createElement('button')
+      document.body.append(panelEl, triggeringElement, outsideButton)
+      jest.spyOn(triggeringElement, 'focus')
+    })
+
+    afterEach(() => {
+      window.requestAnimationFrame.mockRestore()
+      document.body.innerHTML = ''
+    })
+
+    const renderWithOpenPanel = (props) => {
+      useApp.mockReturnValue({ dispatch: mockDispatch, ...mockState, openPanels: { panel1: { props } } })
+      renderHook(() => useInterfaceAPI())
+    }
+
+    it('focuses the triggering element when focus is inside the panel', () => {
+      renderWithOpenPanel({ triggeringElement })
+      panelButton.focus()
+      act(() => mockEventBus.emit('app:hidepanel', 'panel1'))
+      expect(triggeringElement.focus).toHaveBeenCalledWith({ preventScroll: false })
+      expect(mockDispatch).toHaveBeenCalledWith({ type: 'CLOSE_PANEL', payload: 'panel1' })
+    })
+
+    it('focuses the map when focus is inside the panel and the triggering element has gone', () => {
+      triggeringElement.remove()
+      renderWithOpenPanel({ triggeringElement })
+      panelButton.focus()
+      act(() => mockEventBus.emit('app:hidepanel', 'panel1'))
+      expect(triggeringElement.focus).not.toHaveBeenCalled()
+      expect(mockState.layoutRefs.viewportRef.current.focus).toHaveBeenCalled()
+    })
+
+    it('focuses the map when focus is inside a panel opened without a triggering element', () => {
+      renderWithOpenPanel({})
+      panelButton.focus()
+      act(() => mockEventBus.emit('app:hidepanel', 'panel1'))
+      expect(mockState.layoutRefs.viewportRef.current.focus).toHaveBeenCalled()
+    })
+
+    it('leaves focus where it is when focus is outside the panel', () => {
+      renderWithOpenPanel({ triggeringElement })
+      outsideButton.focus()
+      act(() => mockEventBus.emit('app:hidepanel', 'panel1'))
+      expect(triggeringElement.focus).not.toHaveBeenCalled()
+      expect(mockState.layoutRefs.viewportRef.current.focus).not.toHaveBeenCalled()
+      expect(document.activeElement).toBe(outsideButton)
+      expect(mockDispatch).toHaveBeenCalledWith({ type: 'CLOSE_PANEL', payload: 'panel1' })
+    })
+  })
+
   it('dispatches ADD_CONTROL on app:addcontrol', () => {
     renderHook(() => useInterfaceAPI())
     act(() => mockEventBus.emit('app:addcontrol', { id: 'ctrl1', config: { position: 'top-left' } }))
diff --git a/src/App/store/MapProvider.jsx b/src/App/store/MapProvider.jsx
index 88d202cf9..e5e223e6a 100755
--- a/src/App/store/MapProvider.jsx
+++ b/src/App/store/MapProvider.jsx
@@ -2,6 +2,7 @@
 import React, { createContext, useEffect, useReducer, useMemo, useRef } from 'react'
 import { initialState, reducer } from './mapReducer.js'
 import { EVENTS as events } from '../../config/events.js'
+import { getMapSizeScale } from '../../config/mapSizeScales.js'
 
 export const MapContext = createContext(null)
 
@@ -68,8 +69,10 @@ export const MapProvider = ({ options, children }) => {
     localStorage.setItem(`${options.id}:mapSize`, state.mapSize)
   }, [state.mapStyle, state.mapSize])
 
+  // mapSizeScale is worked out from mapSize here rather than stored, so the two can't drift apart
   const mapStore = useMemo(() => ({
     ...state,
+    mapSizeScale: getMapSizeScale(state.mapSize),
     dispatch
   }), [state])
 
diff --git a/src/App/store/MapProvider.test.jsx b/src/App/store/MapProvider.test.jsx
index ddde2e663..c43b513cf 100755
--- a/src/App/store/MapProvider.test.jsx
+++ b/src/App/store/MapProvider.test.jsx
@@ -125,6 +125,30 @@ describe('MapProvider', () => {
     expect(contextValue.isMapReady).toBe(true)
   })
 
+  test.each([
+    ['small', 1],
+    ['medium', 1.5],
+    ['large', 2],
+    ['unknown', 1]
+  ])('provides mapSizeScale for map size %s', (mapSize, expected) => {
+    let contextValue
+    const Child = () => {
+      contextValue = React.useContext(MapContext)
+      return null
+    }
+    render(
+      <MapProvider options={{ id: 'map1', mapSize: 'small', eventBus: mockEventBus }}>
+        <Child />
+      </MapProvider>
+    )
+
+    act(() => {
+      capturedHandlers['map:setsize'](mapSize)
+    })
+
+    expect(contextValue.mapSizeScale).toBe(expected)
+  })
+
   test('emits map:sizechange when mapSize changes after initial value', () => {
     render(
       <MapProvider options={{ id: 'map1', mapSize: '100x100', eventBus: mockEventBus }}>
diff --git a/src/config/mapSizeScales.js b/src/config/mapSizeScales.js
index ad13ac90a..c84947d08 100644
--- a/src/config/mapSizeScales.js
+++ b/src/config/mapSizeScales.js
@@ -6,3 +6,6 @@ export const scaleFactor = {
   medium: 1.5,
   large: 2
 }
+
+// Scale for a map size, falling back to 1 for an unknown or unset size
+export const getMapSizeScale = (mapSize) => scaleFactor[mapSize] ?? 1
diff --git a/src/utils/focusAfterPanelClose.js b/src/utils/focusAfterPanelClose.js
new file mode 100644
index 000000000..f732254b3
--- /dev/null
+++ b/src/utils/focusAfterPanelClose.js
@@ -0,0 +1,9 @@
+// Moves focus to the element that opened a closed panel, or to the map viewport if that element
+// has since left the page (e.g. a Features-list item that dropped out of the list). Runs in the
+// next frame so a modal panel has released its focus trap and inert state first.
+export const focusAfterPanelClose = ({ triggeringElement, viewportRef, interfaceType }) => {
+  requestAnimationFrame(() => {
+    const focusTarget = triggeringElement && document.contains(triggeringElement) ? triggeringElement : viewportRef.current
+    focusTarget?.focus?.({ preventScroll: interfaceType !== 'keyboard' })
+  })
+}
diff --git a/src/utils/focusAfterPanelClose.test.js b/src/utils/focusAfterPanelClose.test.js
new file mode 100644
index 000000000..a9d1fbf8a
--- /dev/null
+++ b/src/utils/focusAfterPanelClose.test.js
@@ -0,0 +1,40 @@
+import { focusAfterPanelClose } from './focusAfterPanelClose.js'
+
+describe('focusAfterPanelClose', () => {
+  let viewportRef
+
+  beforeEach(() => {
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb())
+    viewportRef = { current: { focus: jest.fn() } }
+  })
+
+  afterEach(() => {
+    window.requestAnimationFrame.mockRestore()
+    document.body.innerHTML = ''
+  })
+
+  it('focuses the triggering element when it is still on the page', () => {
+    const triggeringElement = document.body.appendChild(document.createElement('button'))
+    const focusSpy = jest.spyOn(triggeringElement, 'focus')
+    focusAfterPanelClose({ triggeringElement, viewportRef, interfaceType: 'keyboard' })
+    expect(focusSpy).toHaveBeenCalledWith({ preventScroll: false })
+    expect(viewportRef.current.focus).not.toHaveBeenCalled()
+  })
+
+  it('focuses the viewport when the triggering element has left the page', () => {
+    const triggeringElement = document.createElement('button')
+    focusAfterPanelClose({ triggeringElement, viewportRef, interfaceType: 'pointer' })
+    expect(viewportRef.current.focus).toHaveBeenCalledWith({ preventScroll: true })
+  })
+
+  it('focuses the viewport when there is no triggering element', () => {
+    focusAfterPanelClose({ viewportRef, interfaceType: 'keyboard' })
+    expect(viewportRef.current.focus).toHaveBeenCalledWith({ preventScroll: false })
+  })
+
+  it('waits for the next frame before moving focus', () => {
+    window.requestAnimationFrame.mockImplementation(() => 1)
+    focusAfterPanelClose({ viewportRef, interfaceType: 'keyboard' })
+    expect(viewportRef.current.focus).not.toHaveBeenCalled()
+  })
+})