diff --git a/demo/js/index.js b/demo/js/index.js
index 22431cf1..481a2ba4 100755
--- a/demo/js/index.js
+++ b/demo/js/index.js
@@ -126,7 +126,7 @@ const interactiveMap = new InteractiveMap('map', {
 	transformRequest: transformTileRequest,
 	enableZoomControls: true,
 	readMapText: true,
-	enableFullscreen: true,
+	// enableFullscreen: true,
 	// hasExitButton: true,
 	// markers: [{
 	// 	id: 'location',
diff --git a/demo/js/planning.js b/demo/js/planning.js
index 6dec37a9..7f587089 100755
--- a/demo/js/planning.js
+++ b/demo/js/planning.js
@@ -71,8 +71,8 @@ const interactiveMap = new InteractiveMap('map', {
 		mapStylesPlugin({
 			mapStyles: vtsMapStyles27700,
 			manifest: {
-				buttons: [{ id: 'mapStyles', desktop: { slot: 'right-top', showLabel: false }}],
-				panels: [{ id: 'mapStyles', desktop: { slot: 'map-styles-button', width: '400px', modal: false }}]
+				buttons: [{ id: 'mapStyles', desktop: { slot: 'right-top', showLabel: false, modal: true }}],
+				panels: [{ id: 'mapStyles', desktop: { slot: 'map-styles-button', width: '400px' }}]
 			}
 		}),
 		scaleBarPlugin({
@@ -134,6 +134,20 @@ interactiveMap.on('app:ready', function (e) {
 		tablet: { slot: 'inset', width: '260px', open: false, exclusive: true },
 		desktop: { slot: 'inset', width: '280px', open: false, exclusive: true }
 	})
+	interactiveMap.addPanel('test', {
+		label: 'test',
+		html: '<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>',
+		mobile: { slot: 'inset', open: true, modal: true },
+		tablet: { slot: 'left-top', open: true },
+		desktop: { slot: 'left-top', open: true }
+	})
+	interactiveMap.addPanel('test2', {
+		label: 'test2',
+		html: '<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>',
+		mobile: { slot: 'inset', open: true, modal: true },
+		tablet: { slot: 'left-bottom', open: true },
+		desktop: { slot: 'left-bottom', open: true }
+	})
 })
 
 interactiveMap.on('map:ready', function (e) {
diff --git a/plugins/search/src/events/fetchSuggestions.js b/plugins/search/src/events/fetchSuggestions.js
index 9fc24d6f..76f6ad06 100755
--- a/plugins/search/src/events/fetchSuggestions.js
+++ b/plugins/search/src/events/fetchSuggestions.js
@@ -2,19 +2,22 @@
 
 export const sanitiseQuery = (value) => value.replace(/[^a-zA-Z0-9\s\-.,]/g, '').trim()
 
-const getRequestConfig = (ds, query, transformRequest) => {
+const getRequestConfig = async (ds, query, transformRequest) => {
   const defaultRequest = {
     url: ds.urlTemplate?.replace('{query}', encodeURIComponent(query)),
     options: { method: 'GET' }
   }
 
-  if (typeof ds.buildRequest === 'function') {
+  if (ds.buildRequest) {
     return ds.buildRequest(query, () => defaultRequest)
   }
 
-  return typeof transformRequest === 'function'
-    ? transformRequest(defaultRequest, query)
-    : defaultRequest
+  if (transformRequest) {
+    const transformedRequest = await transformRequest(defaultRequest, query)
+    return transformedRequest
+  }
+
+  return defaultRequest
 }
 
 /**
@@ -50,7 +53,7 @@ export const fetchSuggestions = async (value, datasets, dispatch, transformReque
   let finalResults = []
 
   for (const ds of activeDatasets) {
-    const request = getRequestConfig(ds, sanitisedValue, transformRequest)
+    const request = await getRequestConfig(ds, sanitisedValue, transformRequest)
     const results = await fetchDatasetResults(ds, request, sanitisedValue)
 
     // Check if we have results to add
diff --git a/providers/beta/esri/src/esriProvider.scss b/providers/beta/esri/src/esriProvider.scss
index ec8ead3a..a36189ee 100644
--- a/providers/beta/esri/src/esriProvider.scss
+++ b/providers/beta/esri/src/esriProvider.scss
@@ -42,4 +42,9 @@ body, html {
     letter-spacing: inherit !important;
     line-height: inherit !important;
   }
+}
+
+// Hide the ESRI Attribution, manage this elsewhere
+.esri-view-attribution {
+  display: none;
 }
\ No newline at end of file
diff --git a/src/App/components/MapButton/MapButton.jsx b/src/App/components/MapButton/MapButton.jsx
index bd33fc6d..16d8659c 100755
--- a/src/App/components/MapButton/MapButton.jsx
+++ b/src/App/components/MapButton/MapButton.jsx
@@ -244,6 +244,7 @@ export const MapButton = ({
   return (
     <div
       className={buildWrapperClassNames(buttonId, showLabel)}
+      data-button-slot={panelId ? `${stringToKebab(buttonId)}-button` : undefined}
       style={isHidden ? { display: 'none' } : undefined}
     >
       {showLabel ? buttonEl : <Tooltip content={label}>{buttonEl}</Tooltip>}
diff --git a/src/App/components/Panel/Panel.jsx b/src/App/components/Panel/Panel.jsx
index 1548fa7b..db8c4f01 100755
--- a/src/App/components/Panel/Panel.jsx
+++ b/src/App/components/Panel/Panel.jsx
@@ -10,17 +10,17 @@ const computePanelState = (bpConfig, triggeringElement) => {
   const isAside = bpConfig.slot === 'side' && bpConfig.open && !bpConfig.modal
   const isDialog = !isAside && bpConfig.dismissible
   const isModal = bpConfig.modal === true
-  const isDismissable = bpConfig.dismissible !== false
+  const isDismissible = bpConfig.dismissible !== false
   const shouldFocus = Boolean(isModal || triggeringElement)
   const buttonContainerEl = bpConfig.slot.endsWith('button') ? triggeringElement?.parentNode : undefined
-  return { isAside, isDialog, isModal, isDismissable, shouldFocus, buttonContainerEl }
+  return { isAside, isDialog, isModal, isDismissible, shouldFocus, buttonContainerEl }
 }
 
-const getPanelRole = (isDialog, isDismissable) => {
+const getPanelRole = (isDialog, isDismissible) => {
   if (isDialog) {
     return 'dialog'
   }
-  if (isDismissable) {
+  if (isDismissible) {
     return 'complementary'
   }
   return 'region'
@@ -32,19 +32,20 @@ const buildPanelClassNames = (slot, showLabel) => [
   !showLabel && 'im-c-panel--no-heading'
 ].filter(Boolean).join(' ')
 
-const buildPanelBodyClassNames = (showLabel, isDismissable) => [
+const buildPanelBodyClassNames = (showLabel, isDismissible) => [
   'im-c-panel__body',
-  !showLabel && isDismissable && 'im-c-panel__body--offset'
+  !showLabel && isDismissible && 'im-c-panel__body--offset'
 ].filter(Boolean).join(' ')
 
-const buildPanelProps = ({ elementId, shouldFocus, isDialog, isDismissable, isModal, width, panelClass }) => ({
+const buildPanelProps = ({ elementId, shouldFocus, isDialog, isDismissible, isModal, width, panelClass, slot }) => ({
   id: elementId,
   'aria-labelledby': `${elementId}-label`,
   tabIndex: shouldFocus ? -1 : undefined, // nosonar
-  role: getPanelRole(isDialog, isDismissable),
+  role: getPanelRole(isDialog, isDismissible),
   'aria-modal': isDialog && isModal ? 'true' : undefined,
   style: width ? { width } : undefined,
-  className: panelClass
+  className: panelClass,
+  'data-slot': slot
 })
 
 const buildBodyProps = ({ bodyRef, panelBodyClass, isBodyScrollable, elementId }) => ({
@@ -65,7 +66,7 @@ export const Panel = ({ panelId, panelConfig, props, WrappedChild, label, html,
   const bpConfig = panelConfig[breakpoint]
   const elementId = `${id}-panel-${stringToKebab(panelId)}`
 
-  const { isAside, isDialog, isModal, isDismissable, shouldFocus, buttonContainerEl } = computePanelState(bpConfig, props?.triggeringElement)
+  const { isAside, isDialog, isModal, isDismissible, shouldFocus, buttonContainerEl } = computePanelState(bpConfig, props?.triggeringElement)
 
   // For persistent panels, gate modal behaviour on open state
   const isModalActive = isModal && isOpen
@@ -97,10 +98,10 @@ export const Panel = ({ panelId, panelConfig, props, WrappedChild, label, html,
   }, [isOpen])
 
   const panelClass = buildPanelClassNames(bpConfig.slot, bpConfig.showLabel ?? true)
-  const panelBodyClass = buildPanelBodyClassNames(bpConfig.showLabel ?? true, isDismissable)
+  const panelBodyClass = buildPanelBodyClassNames(bpConfig.showLabel ?? true, isDismissible)
   const innerHtmlProp = useMemo(() => html ? { __html: html } : null, [html])
 
-  const panelProps = buildPanelProps({ elementId, shouldFocus, isDialog, isDismissable, isModal, width: bpConfig.width, panelClass })
+  const panelProps = buildPanelProps({ elementId, shouldFocus, isDialog, isDismissible, isModal, width: bpConfig.width, panelClass, slot: bpConfig.slot })
   const bodyProps = buildBodyProps({ bodyRef, panelBodyClass, isBodyScrollable, elementId })
 
   return (
@@ -115,7 +116,7 @@ export const Panel = ({ panelId, panelConfig, props, WrappedChild, label, html,
         {label}
       </h2>
 
-      {isDismissable && (
+      {isDismissible && (
         <button
           aria-label={`Close ${label}`}
           className='im-c-panel__close'
diff --git a/src/App/hooks/useLayoutMeasurements.js b/src/App/hooks/useLayoutMeasurements.js
index 707247ca..e7f83bd5 100755
--- a/src/App/hooks/useLayoutMeasurements.js
+++ b/src/App/hooks/useLayoutMeasurements.js
@@ -17,7 +17,11 @@ export function useLayoutMeasurements () {
     topRightColRef,
     insetRef,
     footerRef,
-    actionsRef
+    actionsRef,
+    leftTopRef,
+    leftBottomRef,
+    rightTopRef,
+    rightBottomRef
   } = layoutRefs
 
   // -----------------------------
@@ -38,31 +42,48 @@ export function useLayoutMeasurements () {
     }
 
     const root = document.documentElement
-    const dividerGap = Number.parseInt(getComputedStyle(root).getPropertyValue('--divider-gap'), 10)
+    const styles = getComputedStyle(root)
+    const dividerGap = Number.parseInt(styles.getPropertyValue('--divider-gap'), 10)
 
-    // === Inset offsets ===
-    const insetOffsetTop = topLeftCol.offsetHeight + top.offsetTop
-    const insetMaxHeight = main.offsetHeight - insetOffsetTop - top.offsetTop
-    appContainer.style.setProperty('--inset-offset-top', `${insetOffsetTop}px`)
-    appContainer.style.setProperty('--inset-max-height', `${insetMaxHeight}px`)
+    // === Top column width ===
+    const leftWidth = topLeftCol.offsetWidth || 0
+    const rightWidth = topRightCol.offsetWidth || 0
+    const finalWidth = leftWidth || rightWidth ? Math.max(leftWidth, rightWidth) : 0
+    appContainer.style.setProperty('--top-col-width', `${finalWidth}px`)
 
-    // === Bottom left offset ===
-    const insetBottom = inset.offsetHeight + insetOffsetTop
-    const bottomOffsetTop = Math.min(bottom.offsetTop, actions.offsetTop)
-    const bottomOffsetLeft = bottomOffsetTop - dividerGap > insetBottom ? 0 : inset.offsetLeft + inset.offsetWidth
-    appContainer.style.setProperty('--offset-left', `${bottomOffsetLeft}px`)
+    // === Left container offsets ===
+    const leftOffsetTop = topLeftCol.offsetHeight + top.offsetTop
+    const leftOffsetBottom = main.offsetHeight - bottom.offsetTop + dividerGap
+    appContainer.style.setProperty('--left-offset-top', `${leftOffsetTop}px`)
+    appContainer.style.setProperty('--left-offset-bottom', `${leftOffsetBottom}px`)
+    const leftColumnHeight = bottom.offsetTop - leftOffsetTop - dividerGap
+    appContainer.style.setProperty('--left-top-max-height', `${leftColumnHeight}px`)
 
     // === Right container offsets ===
     const rightOffsetTop = topRightCol.offsetHeight + top.offsetTop
     const rightOffsetBottom = main.offsetHeight - bottom.offsetTop + dividerGap
     appContainer.style.setProperty('--right-offset-top', `${rightOffsetTop}px`)
     appContainer.style.setProperty('--right-offset-bottom', `${rightOffsetBottom}px`)
+    const rightColumnHeight = bottom.offsetTop - rightOffsetTop - dividerGap
+    appContainer.style.setProperty('--right-top-max-height', `${rightColumnHeight}px`)
 
-    // === Top column width ===
-    const leftWidth = topLeftCol.offsetWidth || 0
-    const rightWidth = topRightCol.offsetWidth || 0
-    const finalWidth = leftWidth || rightWidth ? Math.max(leftWidth, rightWidth) : 0
-    appContainer.style.setProperty('--top-col-width', `${finalWidth}px`)
+    // === Sub-slot panel max-heights ===
+    // Panel max-height = column height minus the sibling's button height (and a gap if non-zero)
+    const leftTopButtons = leftTopRef.current?.offsetHeight ?? 0
+    const leftBottomButtons = leftBottomRef.current?.offsetHeight ?? 0
+    appContainer.style.setProperty('--left-top-panel-max-height', `${leftColumnHeight - (leftBottomButtons ? leftBottomButtons + dividerGap : 0)}px`)
+    appContainer.style.setProperty('--left-bottom-panel-max-height', `${leftColumnHeight - (leftTopButtons ? leftTopButtons + dividerGap : 0)}px`)
+
+    const rightTopButtons = rightTopRef.current?.offsetHeight ?? 0
+    const rightBottomButtons = rightBottomRef.current?.offsetHeight ?? 0
+    appContainer.style.setProperty('--right-top-panel-max-height', `${rightColumnHeight - (rightBottomButtons ? rightBottomButtons + dividerGap : 0)}px`)
+    appContainer.style.setProperty('--right-bottom-panel-max-height', `${rightColumnHeight - (rightTopButtons ? rightTopButtons + dividerGap : 0)}px`)
+
+    // === Bottom left offset ===
+    const insetBottom = inset.offsetHeight + leftOffsetTop
+    const bottomOffsetTop = Math.min(bottom.offsetTop, actions.offsetTop)
+    const bottomOffsetLeft = bottomOffsetTop - dividerGap > insetBottom ? 0 : inset.offsetLeft + inset.offsetWidth
+    appContainer.style.setProperty('--offset-left', `${bottomOffsetLeft}px`)
   }
 
   // --------------------------------
@@ -81,7 +102,7 @@ export function useLayoutMeasurements () {
   // --------------------------------
   // 3. Recaluclate CSS vars when elements resize
   // --------------------------------
-  useResizeObserver([bannerRef, mainRef, topRef, topLeftColRef, topRightColRef, actionsRef, footerRef], () => {
+  useResizeObserver([bannerRef, mainRef, topRef, topLeftColRef, topRightColRef, actionsRef, footerRef, leftTopRef, leftBottomRef, rightTopRef, rightBottomRef], () => {
     requestAnimationFrame(() => {
       calculateLayout()
     })
diff --git a/src/App/hooks/useLayoutMeasurements.test.js b/src/App/hooks/useLayoutMeasurements.test.js
index 4280ef10..44de8e10 100644
--- a/src/App/hooks/useLayoutMeasurements.test.js
+++ b/src/App/hooks/useLayoutMeasurements.test.js
@@ -26,7 +26,11 @@ const refs = (o = {}) => ({
   topRightColRef: { current: el({ offsetHeight: 40, offsetWidth: 180, ...o.topRightCol }) },
   insetRef: { current: o.inset === null ? null : el({ offsetHeight: 100, offsetLeft: 20, offsetWidth: 300, ...o.inset }) },
   footerRef: { current: o.footer === null ? null : el({ offsetTop: 400, ...o.footer }) },
-  actionsRef: { current: el({ offsetTop: 450, ...o.actions }) }
+  actionsRef: { current: el({ offsetTop: 450, ...o.actions }) },
+  leftTopRef: { current: el({ offsetHeight: 0, ...o.leftTop }) },
+  leftBottomRef: { current: el({ offsetHeight: 0, ...o.leftBottom }) },
+  rightTopRef: { current: el({ offsetHeight: 0, ...o.rightTop }) },
+  rightBottomRef: { current: el({ offsetHeight: 0, ...o.rightBottom }) }
 })
 
 const setup = (o = {}) => {
@@ -62,13 +66,11 @@ describe('useLayoutMeasurements', () => {
     const { layoutRefs } = setup()
     renderHook(() => useLayoutMeasurements())
     const spy = layoutRefs.appContainerRef.current.style.setProperty
-    ;['--inset-offset-top', '--inset-max-height', '--offset-left', '--right-offset-top', '--right-offset-bottom', '--top-col-width']
+    ;['--offset-left', '--right-offset-top', '--right-offset-bottom', '--top-col-width']
       .forEach(prop => expect(spy).toHaveBeenCalledWith(prop, expect.any(String)))
   })
 
   test.each([
-    ['inset-offset-top', { main: { offsetHeight: 500 }, top: { offsetTop: 20 }, topLeftCol: { offsetHeight: 50 } }, '70px'],
-    ['inset-max-height', { main: { offsetHeight: 500 }, top: { offsetTop: 20 }, topLeftCol: { offsetHeight: 50 } }, '410px'],
     ['offset-left with overlap', { inset: { offsetHeight: 200, offsetLeft: 30, offsetWidth: 150 }, footer: { offsetTop: 100 }, actions: { offsetTop: 120 }, topLeftCol: { offsetHeight: 50 }, top: { offsetTop: 10 } }, '180px'],
     ['offset-left without overlap', { inset: { offsetHeight: 50, offsetLeft: 30, offsetWidth: 150 }, footer: { offsetTop: 200 }, actions: { offsetTop: 220 }, topLeftCol: { offsetHeight: 50 }, top: { offsetTop: 10 } }, '0px'],
     ['right-offset-top', { topRightCol: { offsetHeight: 80 }, top: { offsetTop: 15 } }, '95px'],
@@ -80,6 +82,22 @@ describe('useLayoutMeasurements', () => {
     expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith(varName, expected)
   })
 
+  // leftColumnHeight = 400 - (50+10) - 8 = 332; rightColumnHeight = 400 - (40+10) - 8 = 342
+  test.each([
+    ['--left-top-panel-max-height', {}, '332px'],
+    ['--left-top-panel-max-height', { leftBottom: { offsetHeight: 50 } }, '274px'], // 332 - 50 - 8
+    ['--left-bottom-panel-max-height', {}, '332px'],
+    ['--left-bottom-panel-max-height', { leftTop: { offsetHeight: 40 } }, '284px'], // 332 - 40 - 8
+    ['--right-top-panel-max-height', {}, '342px'],
+    ['--right-top-panel-max-height', { rightBottom: { offsetHeight: 60 } }, '274px'], // 342 - 60 - 8
+    ['--right-bottom-panel-max-height', {}, '342px'],
+    ['--right-bottom-panel-max-height', { rightTop: { offsetHeight: 30 } }, '304px'] // 342 - 30 - 8
+  ])('calculates %s with sibling buttons=%o correctly', (varName, refOverrides, expected) => {
+    const { layoutRefs } = setup({ refs: refOverrides })
+    renderHook(() => useLayoutMeasurements())
+    expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith(varName, expected)
+  })
+
   test.each([
     [{ offsetWidth: 250 }, { offsetWidth: 200 }, '250px'],
     [{ offsetWidth: 0 }, { offsetWidth: 200 }, '200px'],
@@ -114,7 +132,7 @@ describe('useLayoutMeasurements', () => {
     const { layoutRefs } = setup()
     renderHook(() => useLayoutMeasurements())
     expect(useResizeObserver).toHaveBeenCalledWith(
-      [layoutRefs.bannerRef, layoutRefs.mainRef, layoutRefs.topRef, layoutRefs.topLeftColRef, layoutRefs.topRightColRef, layoutRefs.actionsRef, layoutRefs.footerRef],
+      [layoutRefs.bannerRef, layoutRefs.mainRef, layoutRefs.topRef, layoutRefs.topLeftColRef, layoutRefs.topRightColRef, layoutRefs.actionsRef, layoutRefs.footerRef, layoutRefs.leftTopRef, layoutRefs.leftBottomRef, layoutRefs.rightTopRef, layoutRefs.rightBottomRef],
       expect.any(Function)
     )
     layoutRefs.appContainerRef.current.style.setProperty.mockClear()
diff --git a/src/App/hooks/useModalPanelBehaviour.js b/src/App/hooks/useModalPanelBehaviour.js
index 4b7408a5..dff0716c 100755
--- a/src/App/hooks/useModalPanelBehaviour.js
+++ b/src/App/hooks/useModalPanelBehaviour.js
@@ -2,6 +2,65 @@ import { useEffect } from 'react'
 import { useResizeObserver } from './useResizeObserver.js'
 import { constrainKeyboardFocus } from '../../utils/constrainKeyboardFocus.js'
 import { toggleInertElements } from '../../utils/toggleInertElements.js'
+import { useApp } from '../store/appContext.js'
+
+// Left/right slots reuse the layout CSS vars set by useLayoutMeasurements — no DOM measurement needed.
+// CSS var references resolve correctly at the panel element (inside .im-o-app) even though
+// --modal-inset is set on :root.
+const SLOT_MODAL_VARS = {
+  'left-top': { inset: 'var(--left-offset-top) auto auto var(--primary-gap)', maxHeight: 'var(--left-top-max-height)' },
+  'left-bottom': { inset: 'auto auto var(--left-offset-bottom) var(--primary-gap)', maxHeight: 'var(--left-top-max-height)' },
+  'right-top': { inset: 'var(--right-offset-top) var(--primary-gap) auto auto', maxHeight: 'var(--right-top-max-height)' },
+  'right-bottom': { inset: 'auto var(--primary-gap) var(--right-offset-bottom) auto', maxHeight: 'var(--right-top-max-height)' }
+}
+
+const MODAL_INSET = '--modal-inset'
+const MODAL_MAX_HEIGHT = '--modal-max-height'
+
+const setButtonCSSVar = (effectiveContainer, mainRef, dividerGap) => {
+  const root = document.documentElement
+  const mainRect = mainRef.current.getBoundingClientRect()
+  const buttonRect = effectiveContainer.getBoundingClientRect()
+  const isBottomSlot = !!effectiveContainer.closest('.im-o-app__left-bottom, .im-o-app__right-bottom')
+  const isLeftSlot = !!effectiveContainer.closest('.im-o-app__left-top, .im-o-app__left-bottom')
+
+  const insetTop = isBottomSlot ? 'auto' : `${Math.round(buttonRect.top - mainRect.top)}px`
+  const insetBottom = isBottomSlot ? `${Math.round(mainRect.bottom - buttonRect.bottom)}px` : 'auto'
+  const insetRight = isLeftSlot ? 'auto' : `${Math.round(mainRect.right - buttonRect.left + dividerGap)}px`
+  const insetLeft = isLeftSlot ? `${Math.round(buttonRect.right - mainRect.left + dividerGap)}px` : 'auto'
+  const anchor = isBottomSlot ? Math.round(mainRect.bottom - buttonRect.bottom) : Math.round(buttonRect.top - mainRect.top)
+
+  root.style.setProperty(MODAL_INSET, `${insetTop} ${insetRight} ${insetBottom} ${insetLeft}`)
+  root.style.setProperty(MODAL_MAX_HEIGHT, `${mainRect.height - anchor - dividerGap}px`)
+}
+
+const setSlotCSSVar = (slot, layoutRefs, primaryMargin) => {
+  const root = document.documentElement
+
+  // Left/right slots: delegate entirely to existing layout CSS vars
+  const mapped = SLOT_MODAL_VARS[slot]
+  if (mapped) {
+    root.style.setProperty(MODAL_INSET, mapped.inset)
+    root.style.setProperty(MODAL_MAX_HEIGHT, mapped.maxHeight)
+    return
+  }
+
+  // Other slots (e.g. inset): measure position from DOM
+  const refKey = `${slot[0].toLowerCase() + slot.slice(1)}Ref` // single-part slots only
+  const slotRef = layoutRefs[refKey]?.current
+  const mainContainer = layoutRefs.mainRef?.current
+  if (!slotRef || !mainContainer) {
+    return
+  }
+
+  const slotRect = slotRef.getBoundingClientRect()
+  const mainRect = mainContainer.getBoundingClientRect()
+  const relLeft = slotRect.left - mainRect.left
+  const relTop = slotRect.top - mainRect.top
+
+  root.style.setProperty(MODAL_INSET, `${relTop}px auto auto ${relLeft}px`)
+  root.style.setProperty(MODAL_MAX_HEIGHT, `${mainRect.height - relTop - primaryMargin}px`)
+}
 
 const useModalKeyHandler = (panelRef, isModal, handleClose) => {
   useEffect(() => {
@@ -68,38 +127,43 @@ export function useModalPanelBehaviour ({
   buttonContainerEl,
   handleClose
 }) {
-  useModalKeyHandler(panelRef, isModal, handleClose)
+  const { layoutRefs } = useApp()
 
-  // === Set absolute offset positions and recalculate on mainRef resize === //
-  const root = document.documentElement
-  const dividerGap = Number.parseInt(getComputedStyle(root).getPropertyValue('--divider-gap'), 10)
+  useModalKeyHandler(panelRef, isModal, handleClose)
 
+  // === Set --modal-inset and --modal-max-height, recalculate on mainRef resize === //
   useResizeObserver([mainRef], () => {
     if (!isModal || !mainRef.current) {
       return
     }
 
-    // buttonContainerEl is only defined for button-slot panels (bpConfig.slot ends with '-button').
-    // Skip positioning for all other modal types.
-    if (buttonContainerEl === undefined) {
-      return
-    }
-
-    // Dynamically query the current controlling button via aria-controls to handle the case
-    // where the button has remounted after a breakpoint change (stale triggeringElement).
-    const panelElId = panelRef.current?.id
-    const currentButtonEl = panelElId ? document.querySelector(`[aria-controls="${panelElId}"]`) : null
-    const effectiveContainer = currentButtonEl?.parentElement ?? (buttonContainerEl?.isConnected ? buttonContainerEl : null)
+    const root = document.documentElement
+    const styles = getComputedStyle(root)
+    const dividerGap = Number.parseInt(styles.getPropertyValue('--divider-gap'), 10)
+    const primaryMargin = Number.parseInt(styles.getPropertyValue('--primary-gap'), 10)
+    const slot = panelRef.current.dataset.slot
+
+    // Button-adjacent panels: position next to the controlling button.
+    // Use slot name (not buttonContainerEl) as the gate — buttonContainerEl may be undefined
+    // when there is no triggeringElement (e.g. panel opened programmatically).
+    // Dynamically query via aria-controls to handle stale triggeringElement after breakpoint changes.
+    if (slot?.endsWith('-button')) {
+      const panelElId = panelRef.current?.id
+      const currentButtonEl = panelElId ? document.querySelector(`[aria-controls="${panelElId}"]`) : null
+      const effectiveContainer = currentButtonEl?.parentElement ??
+        (buttonContainerEl?.isConnected ? buttonContainerEl : null) ??
+        document.querySelector(`[data-button-slot="${slot}"]`)
+
+      if (!effectiveContainer) {
+        return
+      }
 
-    if (!effectiveContainer) {
+      setButtonCSSVar(effectiveContainer, mainRef, dividerGap)
       return
     }
 
-    const mainRect = mainRef.current.getBoundingClientRect()
-    const buttonRect = effectiveContainer.getBoundingClientRect()
-    const offsetTop = buttonRect.top - mainRect.top
-    const offsetRight = Math.round(mainRect.right - buttonRect.right + buttonRect.width + dividerGap)
-    root.style.setProperty('--modal-inset', `${offsetTop}px ${offsetRight}px auto auto`)
+    // Slot-based panels: derive position from the slot container element
+    setSlotCSSVar(slot, layoutRefs, primaryMargin)
   })
 
   // === Click on modal backdrop to close === //
diff --git a/src/App/hooks/useModalPanelBehaviour.test.js b/src/App/hooks/useModalPanelBehaviour.test.js
index 31dc643b..b30bccc7 100644
--- a/src/App/hooks/useModalPanelBehaviour.test.js
+++ b/src/App/hooks/useModalPanelBehaviour.test.js
@@ -4,10 +4,12 @@ import { useModalPanelBehaviour } from './useModalPanelBehaviour.js'
 import * as useResizeObserverModule from './useResizeObserver.js'
 import * as constrainFocusModule from '../../utils/constrainKeyboardFocus.js'
 import * as toggleInertModule from '../../utils/toggleInertElements.js'
+import { useApp } from '../store/appContext.js'
 
 jest.mock('./useResizeObserver.js')
 jest.mock('../../utils/constrainKeyboardFocus.js')
 jest.mock('../../utils/toggleInertElements.js')
+jest.mock('../store/appContext.js')
 
 describe('useModalPanelBehaviour', () => {
   let refs, elements, handleClose
@@ -17,8 +19,9 @@ describe('useModalPanelBehaviour', () => {
       main: { current: document.createElement('div') },
       panel: { current: document.createElement('div') }
     }
-    // Give panel an ID for aria-controls tests
+    // Give panel an ID for aria-controls tests and a slot for setSlotCSSVar
     refs.panel.current.id = 'modal-panel-id'
+    refs.panel.current.dataset.slot = 'inset'
 
     elements = {
       buttonContainer: document.createElement('div'),
@@ -31,6 +34,8 @@ describe('useModalPanelBehaviour', () => {
     handleClose = jest.fn()
     jest.clearAllMocks()
     document.documentElement.style.setProperty('--modal-inset', '')
+    document.documentElement.style.setProperty('--modal-max-height', '')
+    useApp.mockReturnValue({ layoutRefs: {} })
   })
 
   afterEach(() => {
@@ -72,7 +77,9 @@ describe('useModalPanelBehaviour', () => {
     )
   })
 
-  describe('positioning (--modal-inset)', () => {
+  describe('positioning (--modal-inset, --modal-max-height)', () => {
+    const buttonSlot = 'map-styles-button'
+
     beforeEach(() => {
       // Force ResizeObserver to run the callback immediately
       useResizeObserverModule.useResizeObserver.mockImplementation((_, cb) => cb())
@@ -87,20 +94,38 @@ describe('useModalPanelBehaviour', () => {
       })
     })
 
-    it('hits the buttonContainerEl === undefined branch', () => {
-      refs.main.current = document.createElement('div') // mainRef must exist
+    it('sets --modal-inset via SLOT_MODAL_VARS for left/right slots', () => {
+      refs.panel.current.dataset.slot = 'left-top'
       render(<TestComponent />)
+      expect(document.documentElement.style.getPropertyValue('--modal-inset'))
+        .toBe('var(--left-offset-top) auto auto var(--primary-gap)')
+      expect(document.documentElement.style.getPropertyValue('--modal-max-height'))
+        .toBe('var(--left-top-max-height)')
+    })
+
+    it('sets --modal-inset and --modal-max-height from slot container when no buttonContainerEl', () => {
+      const insetEl = document.createElement('div')
+      Object.defineProperty(insetEl, 'getBoundingClientRect', {
+        value: () => ({ top: 60, left: 8, right: 200, bottom: 200 }),
+        configurable: true
+      })
+      Object.defineProperty(insetEl, 'offsetWidth', { value: 192, configurable: true })
+      useApp.mockReturnValue({ layoutRefs: { insetRef: { current: insetEl }, mainRef: refs.main } })
 
-      // Manually trigger ResizeObserver callback (if mocked)
-      const callback = useResizeObserverModule.useResizeObserver.mock.calls[0][1]
-      callback()
+      render(<TestComponent />)
 
-      // Expect CSS variable not set, just to assert callback ran
-      const inset = document.documentElement.style.getPropertyValue('--modal-inset')
-      expect(inset).toBe('')
+      expect(document.documentElement.style.getPropertyValue('--modal-inset')).toBe('60px auto auto 8px')
+      expect(document.documentElement.style.getPropertyValue('--modal-max-height')).toContain('px')
     })
 
-    it('updates --modal-inset via aria-controls when buttonContainerEl is stale', () => {
+    it('leaves --modal-inset unset when slot ref cannot be resolved', () => {
+      render(<TestComponent />)
+      expect(document.documentElement.style.getPropertyValue('--modal-inset')).toBe('')
+    })
+
+    it('updates --modal-inset and --modal-max-height via aria-controls when buttonContainerEl is stale', () => {
+      refs.panel.current.dataset.slot = buttonSlot
+
       const button = document.createElement('button')
       button.setAttribute('aria-controls', 'modal-panel-id')
       elements.buttonContainer.appendChild(button)
@@ -109,14 +134,25 @@ describe('useModalPanelBehaviour', () => {
       const staleEl = document.createElement('div') // detached
       render(<TestComponent buttonContainerEl={staleEl} />)
 
-      const inset = document.documentElement.style.getPropertyValue('--modal-inset')
-      expect(inset).toContain('10px')
+      expect(document.documentElement.style.getPropertyValue('--modal-inset')).toContain('10px')
+      expect(document.documentElement.style.getPropertyValue('--modal-max-height')).toContain('px')
+    })
+
+    it('uses data-button-slot fallback when no aria-controls button and no buttonContainerEl', () => {
+      refs.panel.current.dataset.slot = buttonSlot
+      elements.buttonContainer.dataset.buttonSlot = buttonSlot
+      document.body.appendChild(elements.buttonContainer)
+
+      render(<TestComponent buttonContainerEl={undefined} />)
+
+      expect(document.documentElement.style.getPropertyValue('--modal-inset')).toContain('10px')
+      expect(document.documentElement.style.getPropertyValue('--modal-max-height')).toContain('px')
     })
 
     it('skips update when effectiveContainer cannot be resolved', () => {
+      refs.panel.current.dataset.slot = buttonSlot
       render(<TestComponent buttonContainerEl={null} />)
-      const inset = document.documentElement.style.getPropertyValue('--modal-inset')
-      expect(inset).toBe('')
+      expect(document.documentElement.style.getPropertyValue('--modal-inset')).toBe('')
     })
   })
 
diff --git a/src/App/layout/Layout.jsx b/src/App/layout/Layout.jsx
index 85919ef3..a701fbe2 100755
--- a/src/App/layout/Layout.jsx
+++ b/src/App/layout/Layout.jsx
@@ -66,17 +66,25 @@ export const Layout = () => {
           <div className='im-o-app__inset' ref={layoutRefs.insetRef}>
             <SlotRenderer slot={layoutSlots.INSET} />
           </div>
+          <div className='im-o-app__left' ref={layoutRefs.leftRef}>
+            <div className='im-o-app__left-top' ref={layoutRefs.leftTopRef}>
+              <SlotRenderer slot={layoutSlots.LEFT_TOP} />
+            </div>
+            <div className='im-o-app__left-bottom' ref={layoutRefs.leftBottomRef}>
+              <SlotRenderer slot={layoutSlots.LEFT_BOTTOM} />
+            </div>
+          </div>
+          <div className='im-o-app__middle' ref={layoutRefs.middleRef}>
+            <SlotRenderer slot={layoutSlots.MIDDLE} />
+          </div>
           <div className='im-o-app__right' ref={layoutRefs.rightRef}>
-            <div className='im-o-app__right-top'>
+            <div className='im-o-app__right-top' ref={layoutRefs.rightTopRef}>
               <SlotRenderer slot={layoutSlots.RIGHT_TOP} />
             </div>
             <div className='im-o-app__right-bottom' ref={layoutRefs.rightBottomRef}>
               <SlotRenderer slot={layoutSlots.RIGHT_BOTTOM} />
             </div>
           </div>
-          <div className='im-o-app__middle' ref={layoutRefs.middleRef}>
-            <SlotRenderer slot={layoutSlots.MIDDLE} />
-          </div>
           <div className='im-o-app__footer' ref={layoutRefs.footerRef}>
             <div className='im-o-app__footer-col'>
               <Logo />
diff --git a/src/App/layout/layout.module.scss b/src/App/layout/layout.module.scss
index 70c35ae8..56e2243b 100755
--- a/src/App/layout/layout.module.scss
+++ b/src/App/layout/layout.module.scss
@@ -139,12 +139,57 @@
   flex-direction: column;
   position: absolute;
   gap: var(--divider-gap);
-  top: var(--inset-offset-top);
+  top: var(--left-offset-top);
 }
 
-.im-o-app__inset .im-c-panel {
-  height: 100%;
-  max-height: var(--inset-max-height);
+// ---------------------------------------------------
+// Left: Buttons and panels
+// ---------------------------------------------------
+
+.im-o-app__left {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  left: var(--primary-gap);
+  top: var(--left-offset-top);
+  bottom: var(--left-offset-bottom);
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: bottom 0.15s ease;
+  }
+}
+
+.im-o-app__left-top {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  align-items: flex-end;
+  position: relative;
+  gap: var(--divider-gap);
+
+  .im-c-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    max-height: var(--left-top-panel-max-height);
+  }
+}
+
+.im-o-app__left-bottom {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  margin-top: auto;
+  align-items: flex-end;
+  position: relative;
+  gap: var(--divider-gap);
+
+  .im-c-panel {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    max-height: var(--left-bottom-panel-max-height);
+  }
 }
 
 // ---------------------------------------------------
@@ -164,7 +209,7 @@
 }
 
 // ---------------------------------------------------
-// Right: Buttons and inset panel
+// Right: Buttons and panels
 // ---------------------------------------------------
 
 .im-o-app__right {
@@ -174,18 +219,87 @@
   right: var(--primary-gap);
   top: var(--right-offset-top);
   bottom: var(--right-offset-bottom);
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: bottom 0.15s ease;
+  }
 }
 
 .im-o-app__right-top {
   display: flex;
   flex-direction: column;
-  flex-shrink: 0;
+  flex: 0 0 auto;
   align-items: flex-end;
+  position: relative;
   gap: var(--divider-gap);
+
+  .im-c-panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    max-height: var(--right-top-panel-max-height);
+  }
 }
 
 .im-o-app__right-bottom {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
   margin-top: auto;
+  align-items: flex-end;
+  position: relative;
+  gap: var(--divider-gap);
+
+  .im-c-panel {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    max-height: var(--right-bottom-panel-max-height);
+  }
+}
+
+// When both left sub-slots have panels, split the column proportionally
+// so panels don't overlap. flex: 1 1 auto gives each sub-slot a share of the
+// column; max-height: 100% caps the panel at its sub-slot height (not forced).
+.im-o-app__left:has(.im-o-app__left-top > .im-c-panel:not([style*="display: none"])):has(.im-o-app__left-bottom > .im-c-panel:not([style*="display: none"])) {
+  gap: var(--divider-gap);
+
+  .im-o-app__left-top,
+  .im-o-app__left-bottom {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  .im-o-app__left-bottom {
+    margin-top: 0;
+    justify-content: flex-end;
+  }
+
+  .im-o-app__left-top .im-c-panel,
+  .im-o-app__left-bottom .im-c-panel {
+    max-height: 100%;
+  }
+}
+
+// Same for right column
+.im-o-app__right:has(.im-o-app__right-top > .im-c-panel:not([style*="display: none"])):has(.im-o-app__right-bottom > .im-c-panel:not([style*="display: none"])) {
+  gap: var(--divider-gap);
+
+  .im-o-app__right-top,
+  .im-o-app__right-bottom {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  .im-o-app__right-bottom {
+    margin-top: 0;
+    justify-content: flex-end;
+  }
+
+  .im-o-app__right-top .im-c-panel,
+  .im-o-app__right-bottom .im-c-panel {
+    max-height: 100%;
+  }
 }
 
 // ---------------------------------------------------
@@ -301,10 +415,33 @@
   }
 
   .im-c-panel--inset {
-    top: var(--inset-offset-top);
-    left: var(--primary-gap);
+    inset: var(--modal-inset);
     max-width: calc(100% - (var(--primary-gap) * 2));
-    max-height: calc(100% - var(--inset-offset-top) - var(--primary-gap));
+    max-height: var(--modal-max-height);
+  }
+
+  .im-c-panel--left-top,
+  .im-c-panel.im-c-panel--left-top-button {
+    inset: var(--left-offset-top) auto auto var(--primary-gap);
+    max-height: calc(100% - var(--left-offset-top) - var(--primary-gap));
+  }
+
+  .im-c-panel--left-bottom,
+  .im-c-panel.im-c-panel--left-bottom-button {
+    inset: auto auto var(--left-offset-bottom) var(--primary-gap);
+    max-height: calc(100% - var(--left-offset-bottom) - var(--primary-gap));
+  }
+
+  .im-c-panel--right-top,
+  .im-c-panel.im-c-panel--right-top-button {
+    inset: var(--right-offset-top) var(--primary-gap) auto auto;
+    max-height: calc(100% - var(--right-offset-top) - var(--primary-gap));
+  }
+
+  .im-c-panel--right-bottom,
+  .im-c-panel.im-c-panel--right-bottom-button {
+    inset: auto var(--primary-gap) var(--right-offset-bottom) auto;
+    max-height: calc(100% - var(--right-offset-bottom) - var(--primary-gap));
   }
 
   .im-c-panel--middle {
@@ -323,7 +460,9 @@
 
   [class*="im-c-panel--"][class*="-button"] { // Adjacent to button
     inset: var(--modal-inset);
+    max-height: var(--modal-max-height);
   }
+
 }
 
 // Mobile and tablet
diff --git a/src/App/renderer/HtmlElementHost.jsx b/src/App/renderer/HtmlElementHost.jsx
index 52820756..3551b749 100644
--- a/src/App/renderer/HtmlElementHost.jsx
+++ b/src/App/renderer/HtmlElementHost.jsx
@@ -4,7 +4,6 @@ import { useApp } from '../store/appContext.js'
 import { Panel } from '../components/Panel/Panel.jsx'
 import { resolveTargetSlot, isModeAllowed, isControlVisible, isConsumerHtml } from './slotHelpers.js'
 import { allowedSlots } from './slots.js'
-import { stringToKebab } from '../../utils/stringToKebab.js'
 
 /**
  * Maps slot names to their corresponding layout refs.
@@ -16,12 +15,20 @@ export const getSlotRef = (slot, layoutRefs) => {
     'top-left': layoutRefs.topLeftColRef,
     'top-right': layoutRefs.topRightColRef,
     inset: layoutRefs.insetRef,
+    'left-top': layoutRefs.leftTopRef,
+    'left-bottom': layoutRefs.leftBottomRef,
     middle: layoutRefs.middleRef,
-    bottom: layoutRefs.bottomRef,
+    'right-top': layoutRefs.rightTopRef,
     'right-bottom': layoutRefs.rightBottomRef,
+    bottom: layoutRefs.bottomRef,
     actions: layoutRefs.actionsRef,
     modal: layoutRefs.modalRef
   }
+  if (slot?.endsWith('-button')) {
+    const el = document.querySelector(`[data-button-slot="${slot}"]`)
+    return el ? { current: el } : null
+  }
+
   return slotRefMap[slot] || null
 }
 
@@ -79,7 +86,7 @@ const PersistentPanel = ({ panelId, config, isOpen, openPanelProps, allowedModal
     }
 
     // 2. Slot Validation
-    const isNextToButton = `${stringToKebab(panelId)}-button` === targetSlot
+    const isNextToButton = targetSlot.endsWith('-button')
     const isSlotAllowed = allowedSlots.panel.includes(targetSlot) || isNextToButton
 
     if (!isSlotAllowed) {
diff --git a/src/App/renderer/HtmlElementHost.test.jsx b/src/App/renderer/HtmlElementHost.test.jsx
index d3838328..7203d1d8 100644
--- a/src/App/renderer/HtmlElementHost.test.jsx
+++ b/src/App/renderer/HtmlElementHost.test.jsx
@@ -292,6 +292,18 @@ describe('HtmlElementHost', () => {
     expect(getSlotRef('unknown-slot', {})).toBeNull()
   })
 
+  test('getSlotRef returns wrapped element for button slot when element exists', () => {
+    const el = document.createElement('div')
+    el.dataset.buttonSlot = 'my-panel-button'
+    document.body.appendChild(el)
+    expect(getSlotRef('my-panel-button', {})).toEqual({ current: el })
+    el.remove()
+  })
+
+  test('getSlotRef returns null for button slot when no element found', () => {
+    expect(getSlotRef('nonexistent-button', {})).toBeNull()
+  })
+
   it('does not append child if slotRef exists but current is null', () => {
     // 1. Setup refs where the slot exists in the map but the DOM node (current) is null
     const incompleteRefs = {
diff --git a/src/App/renderer/SlotRenderer.jsx b/src/App/renderer/SlotRenderer.jsx
index 6aa930fd..e7f75531 100755
--- a/src/App/renderer/SlotRenderer.jsx
+++ b/src/App/renderer/SlotRenderer.jsx
@@ -24,7 +24,7 @@ export const SlotRenderer = ({ slot }) => {
     <>
       {slot === 'actions'
         ? (
-          <Actions slot={slot}>
+          <Actions slot='actions'>
             {slotItems.map(item => item.element)}
           </Actions>
           )
diff --git a/src/App/renderer/mapPanels.js b/src/App/renderer/mapPanels.js
index 2ee4f32a..fe784fd5 100755
--- a/src/App/renderer/mapPanels.js
+++ b/src/App/renderer/mapPanels.js
@@ -1,6 +1,5 @@
 // src/core/renderers/mapPanels.js
 import React from 'react'
-import { stringToKebab } from '../../utils/stringToKebab.js'
 import { withPluginContexts } from './pluginWrapper.js'
 import { Panel } from '../components/Panel/Panel.jsx'
 import { allowedSlots } from './slots.js'
@@ -12,7 +11,7 @@ import { resolveTargetSlot, isModeAllowed, isConsumerHtml } from './slotHelpers.
  * and ensures only the topmost modal panel is shown.
  */
 const isPanelVisible = (panelId, config, bpConfig, { targetSlot, slot, mode, isFullscreen, allowedModalPanelId }) => {
-  const isNextToButton = `${stringToKebab(panelId)}-button` === targetSlot
+  const isNextToButton = targetSlot.endsWith('-button')
   if (!allowedSlots.panel.includes(targetSlot) && !isNextToButton) {
     return false
   }
diff --git a/src/App/renderer/slots.js b/src/App/renderer/slots.js
index 8d302ea5..6130bc44 100755
--- a/src/App/renderer/slots.js
+++ b/src/App/renderer/slots.js
@@ -6,9 +6,11 @@ export const layoutSlots = Object.freeze({
   TOP_MIDDLE: 'top-middle',
   TOP_RIGHT: 'top-right',
   INSET: 'inset',
+  LEFT_TOP: 'left-top',
+  LEFT_BOTTOM: 'left-bottom',
+  MIDDLE: 'middle',
   RIGHT_TOP: 'right-top',
   RIGHT_BOTTOM: 'right-bottom',
-  MIDDLE: 'middle',
   FOOTER_RIGHT: 'footer-right',
   BOTTOM: 'bottom',
   ACTIONS: 'actions',
@@ -29,17 +31,21 @@ export const allowedSlots = Object.freeze({
   panel: [
     layoutSlots.SIDE,
     layoutSlots.BANNER,
-    layoutSlots.INSET,
-    layoutSlots.RIGHT_BOTTOM,
+    layoutSlots.INSET, // Deprecate
+    layoutSlots.LEFT_TOP,
+    layoutSlots.LEFT_BOTTOM,
     layoutSlots.MIDDLE,
-    layoutSlots.BOTTOM,
-    layoutSlots.ACTIONS,
-    layoutSlots.MODAL
+    layoutSlots.RIGHT_TOP,
+    layoutSlots.RIGHT_BOTTOM,
+    layoutSlots.BOTTOM, // Typicaly on mobile
+    layoutSlots.MODAL // Internal only
   ],
   button: [
     layoutSlots.TOP_LEFT,
     layoutSlots.TOP_MIDDLE,
     layoutSlots.TOP_RIGHT,
+    layoutSlots.LEFT_TOP,
+    layoutSlots.LEFT_BOTTOM,
     layoutSlots.RIGHT_TOP,
     layoutSlots.RIGHT_BOTTOM,
     layoutSlots.ACTIONS
diff --git a/src/App/store/AppProvider.jsx b/src/App/store/AppProvider.jsx
index 10345ab8..cf483359 100755
--- a/src/App/store/AppProvider.jsx
+++ b/src/App/store/AppProvider.jsx
@@ -20,9 +20,13 @@ export const AppProvider = ({ options, children }) => {
     topLeftColRef: useRef(null),
     topRightColRef: useRef(null),
     insetRef: useRef(null),
+    leftRef: useRef(null),
+    leftTopRef: useRef(null),
+    leftBottomRef: useRef(null),
+    middleRef: useRef(null),
     rightRef: useRef(null),
+    rightTopRef: useRef(null),
     rightBottomRef: useRef(null),
-    middleRef: useRef(null),
     bottomRef: useRef(null),
     footerRef: useRef(null),
     actionsRef: useRef(null),
diff --git a/src/utils/getSafeZoneInset.js b/src/utils/getSafeZoneInset.js
index 98748200..aa84c58a 100755
--- a/src/utils/getSafeZoneInset.js
+++ b/src/utils/getSafeZoneInset.js
@@ -10,6 +10,7 @@
  * @param {Object} refs - React refs for the key layout elements.
  * @param {React.RefObject} refs.mainRef - The main content area.
  * @param {React.RefObject} refs.insetRef - The inset panel (e.g. search results).
+ * @param {React.RefObject} refs.leftRef - The left-hand button column.
  * @param {React.RefObject} refs.rightRef - The right-hand button column.
  * @param {React.RefObject} refs.actionsRef - The bottom action bar.
  * @param {React.RefObject} refs.footerRef - The footer (logo, copyright etc).
@@ -19,29 +20,31 @@
 export const getSafeZoneInset = ({
   mainRef,
   insetRef,
+  leftRef,
   rightRef,
   actionsRef,
   footerRef
 }) => {
-  const refs = [mainRef, insetRef, rightRef, actionsRef, footerRef]
+  const refs = [mainRef, insetRef, leftRef, rightRef, actionsRef, footerRef]
 
   if (refs.some(ref => !ref.current)) {
     return undefined
   }
 
-  const [main, inset, right, actions, footer] = refs.map(ref => ref.current)
+  const [main, inset, left, right, actions, footer] = refs.map(ref => ref.current)
 
   const root = document.documentElement
   const dividerGap = Number.parseInt(getComputedStyle(root).getPropertyValue('--divider-gap'), 10)
 
   // === Safe area logic ===
   const availableHeight = actions.offsetTop - inset.offsetTop - dividerGap
-  const rightOffset = inset.offsetLeft + right.offsetWidth + dividerGap
-  const availableWidth = main.offsetWidth - rightOffset * 2
-  const insetOverlapWidth = inset.offsetWidth - rightOffset + inset.offsetLeft
+  const leftOffset = left.offsetLeft + left.offsetWidth + dividerGap
+  const rightOffset = left.offsetLeft + right.offsetWidth + dividerGap
+  const availableWidth = main.offsetWidth - (leftOffset + rightOffset)
+  const insetOverlapWidth = inset.offsetWidth - leftOffset + left.offsetLeft
   const isLandscape = availableWidth - insetOverlapWidth > availableHeight - inset.offsetHeight
-  const topOffset = inset.offsetTop + (!isLandscape && inset.offsetHeight > 0 ? inset.offsetHeight + dividerGap : 0)
-  const leftOffset = isLandscape ? inset.offsetWidth + inset.offsetLeft + dividerGap : rightOffset
+  const topOffset = left.offsetTop + (!isLandscape && inset.offsetHeight > 0 ? inset.offsetHeight + dividerGap : 0)
+  const combinedLeftOffset = isLandscape ? Math.max(inset.offsetWidth, left.offsetWidth) + left.offsetLeft + dividerGap : rightOffset
   const actionsOffset = main.offsetHeight - actions.offsetTop
   const footerOffset = main.offsetHeight - footer.offsetTop
 
@@ -49,8 +52,8 @@ export const getSafeZoneInset = ({
   const hasRoom = insetOverlapWidth < availableWidth / RATIO && inset.offsetHeight < availableHeight / RATIO
 
   const top = hasRoom ? inset.offsetTop : topOffset
-  const left = main.offsetLeft + (hasRoom ? rightOffset : Math.max(leftOffset, rightOffset))
+  const combinedLeft = main.offsetLeft + (hasRoom ? rightOffset : combinedLeftOffset)
   const bottom = Math.max(actionsOffset, footerOffset) + dividerGap
 
-  return { top, right: rightOffset, left, bottom }
+  return { top, right: rightOffset, left: combinedLeft, bottom }
 }
diff --git a/src/utils/getSafeZoneInset.test.js b/src/utils/getSafeZoneInset.test.js
index 3705554e..1c72ac7b 100644
--- a/src/utils/getSafeZoneInset.test.js
+++ b/src/utils/getSafeZoneInset.test.js
@@ -1,7 +1,7 @@
 import { getSafeZoneInset } from './getSafeZoneInset'
 
 describe('getSafeZoneInset', () => {
-  let mainRef, insetRef, rightRef, footerRef, actionsRef
+  let mainRef, insetRef, leftRef, rightRef, actionsRef, footerRef
   let originalGetComputedStyle
 
   beforeAll(() => { originalGetComputedStyle = window.getComputedStyle })
@@ -10,80 +10,124 @@ describe('getSafeZoneInset', () => {
   beforeEach(() => {
     mainRef = { current: { offsetWidth: 800, offsetHeight: 600, offsetLeft: 0 } }
     insetRef = { current: { offsetWidth: 100, offsetHeight: 50, offsetTop: 50, offsetLeft: 20 } }
-    rightRef = { current: { offsetWidth: 50, offsetLeft: 0 } }
-    footerRef = { current: { offsetTop: 550 } }
+    leftRef = { current: { offsetWidth: 50, offsetLeft: 20, offsetTop: 10 } }
+    rightRef = { current: { offsetWidth: 50, offsetLeft: 730 } }
     actionsRef = { current: { offsetTop: 520 } }
+    footerRef = { current: { offsetTop: 550 } }
 
-    // Mock CSS var --divider-gap = 10
+    // CSS var mock
     window.getComputedStyle = jest.fn().mockReturnValue({ getPropertyValue: () => '10' })
   })
 
-  const runScenario = ({ isLandscape, insetHeight }) => {
-    insetRef.current.offsetHeight = insetHeight
+  it('returns undefined if any ref.current is null', () => {
+    const result = getSafeZoneInset({
+      mainRef: { current: null },
+      insetRef,
+      leftRef,
+      rightRef,
+      actionsRef,
+      footerRef
+    })
+    expect(result).toBeUndefined()
+  })
 
-    // Manipulate dimensions to influence landscape heuristic
-    if (isLandscape) {
-      mainRef.current.offsetWidth = 1000
-      insetRef.current.offsetWidth = 400
-    } else {
-      mainRef.current.offsetWidth = 600
-      insetRef.current.offsetWidth = 100
-    }
+  it('portrait mode shifts inset below itself when it does NOT have enough vertical room', () => {
+    // Mock layout
+    mainRef.current.offsetWidth = 200
+    mainRef.current.offsetHeight = 200
+    insetRef.current.offsetWidth = 100
+    insetRef.current.offsetHeight = 50
+    insetRef.current.offsetTop = 50
+    insetRef.current.offsetLeft = 20
 
-    return getSafeZoneInset({ mainRef, insetRef, rightRef, footerRef, actionsRef })
-  }
+    leftRef.current.offsetWidth = 50
+    leftRef.current.offsetLeft = 10
+    leftRef.current.offsetTop = 10
 
-  it('topOffset adds 0 when portrait and height = 0', () => {
-    const result = runScenario({ isLandscape: false, insetHeight: 0 })
-    expect(result.top).toBe(insetRef.current.offsetTop)
-  })
+    rightRef.current.offsetWidth = 50
+    rightRef.current.offsetLeft = 140
 
-  it('landscape returns left = rightOffset when there is enough room', () => {
-    const result = runScenario({ isLandscape: true, insetHeight: 50 })
-    expect(result.top).toBe(insetRef.current.offsetTop)
-    expect(result.left).toBe(80) // rightOffset = 20 + 50 + 10
-    expect(result.left).toBe(result.right) // left equals returned rightOffset
-  })
+    actionsRef.current.offsetTop = 150
+    footerRef.current.offsetTop = 180
 
-  it('landscape returns left = rightOffset even when inset height = 0', () => {
-    const result = runScenario({ isLandscape: true, insetHeight: 0 })
-    expect(result.top).toBe(insetRef.current.offsetTop)
-    expect(result.left).toBe(80)
-    expect(result.left).toBe(result.right)
+    const dividerGap = 10
+
+    const result = getSafeZoneInset({ mainRef, insetRef, leftRef, rightRef, actionsRef, footerRef })
+
+    // Compute expected values exactly as function would
+    const availableHeight = actionsRef.current.offsetTop - insetRef.current.offsetTop - dividerGap // 150 - 50 - 10 = 90
+    const leftOffset = leftRef.current.offsetLeft + leftRef.current.offsetWidth + dividerGap // 10 + 50 + 10 = 70
+    const rightOffset = leftRef.current.offsetLeft + rightRef.current.offsetWidth + dividerGap // 10 + 50 + 10 = 70
+    const availableWidth = mainRef.current.offsetWidth - (leftOffset + rightOffset) // 200 - (70+70) = 60
+    const insetOverlapWidth = insetRef.current.offsetWidth - leftOffset + leftRef.current.offsetLeft // 100 - 70 + 10 = 40
+    const isLandscape = availableWidth - insetOverlapWidth > availableHeight - insetRef.current.offsetHeight // 60-40 > 90-50 => 20>40 false
+
+    const topOffset = leftRef.current.offsetTop + (!isLandscape && insetRef.current.offsetHeight > 0 ? insetRef.current.offsetHeight + dividerGap : 0) // 10 + 50 +10 = 70
+    const combinedLeftOffset = isLandscape ? Math.max(insetRef.current.offsetWidth, leftRef.current.offsetWidth) + leftRef.current.offsetLeft + dividerGap : rightOffset // isLandscape=false -> 70
+    const actionsOffset = mainRef.current.offsetHeight - actionsRef.current.offsetTop // 200-150=50
+    const footerOffset = mainRef.current.offsetHeight - footerRef.current.offsetTop // 200-180=20
+    const hasRoom = insetOverlapWidth < availableWidth / 2 && insetRef.current.offsetHeight < availableHeight / 2 // 40 < 60/2? 40<30 false
+
+    const expectedTop = hasRoom ? insetRef.current.offsetTop : topOffset // false -> topOffset = 70
+    const expectedLeft = mainRef.current.offsetLeft + (hasRoom ? rightOffset : combinedLeftOffset) // 0+70=70
+    const expectedRight = rightOffset // 70
+    const expectedBottom = Math.max(actionsOffset, footerOffset) + dividerGap // max(50,20)+10 = 60
+
+    expect(result.top).toBe(expectedTop)
+    expect(result.left).toBe(expectedLeft)
+    expect(result.right).toBe(expectedRight)
+    expect(result.bottom).toBe(expectedBottom)
   })
 
-  it('portrait shifts inset below itself when it does NOT have enough vertical room', () => {
-    // Force a portrait overflow case
-    mainRef.current.offsetWidth = 200
-    insetRef.current.offsetWidth = 100
+  it('landscape mode places inset beside panel when enough room', () => {
+    mainRef.current.offsetWidth = 1000
+    insetRef.current.offsetWidth = 200
     insetRef.current.offsetHeight = 50
-    insetRef.current.offsetTop = 50
-    window.getComputedStyle = jest.fn().mockReturnValue({ getPropertyValue: () => '10' })
 
-    const result = getSafeZoneInset({ mainRef, insetRef, rightRef, footerRef, actionsRef })
+    const result = getSafeZoneInset({ mainRef, insetRef, leftRef, rightRef, actionsRef, footerRef })
+
+    const dividerGap = 10
+    const leftOffset = leftRef.current.offsetLeft + leftRef.current.offsetWidth + dividerGap
+    const rightOffset = leftRef.current.offsetLeft + rightRef.current.offsetWidth + dividerGap
+    const availableWidth = mainRef.current.offsetWidth - (leftOffset + rightOffset)
+    const insetOverlapWidth = insetRef.current.offsetWidth - leftOffset + leftRef.current.offsetLeft
+    const availableHeight = actionsRef.current.offsetTop - insetRef.current.offsetTop - dividerGap
+    const isLandscape = availableWidth - insetOverlapWidth > availableHeight - insetRef.current.offsetHeight
+
+    const topOffset = leftRef.current.offsetTop + (!isLandscape && insetRef.current.offsetHeight > 0 ? insetRef.current.offsetHeight + dividerGap : 0)
+    const combinedLeftOffset = isLandscape ? Math.max(insetRef.current.offsetWidth, leftRef.current.offsetWidth) + leftRef.current.offsetLeft + dividerGap : rightOffset
+    const actionsOffset = mainRef.current.offsetHeight - actionsRef.current.offsetTop
+    const footerOffset = mainRef.current.offsetHeight - footerRef.current.offsetTop
+    const hasRoom = insetOverlapWidth < availableWidth / 2 && insetRef.current.offsetHeight < availableHeight / 2
+    const top = hasRoom ? insetRef.current.offsetTop : topOffset
+    const combinedLeft = mainRef.current.offsetLeft + (hasRoom ? rightOffset : combinedLeftOffset)
+    const bottom = Math.max(actionsOffset, footerOffset) + dividerGap
 
-    // topOffset = 50 + 50 + 10 = 110
-    expect(result.top).toBe(110)
-    // left = rightOffset = 20 + 50 + 10 = 80
-    expect(result.left).toBe(80)
-    expect(result.right).toBe(80)
+    expect(result.top).toBe(top)
+    expect(result.left).toBe(combinedLeft)
+    expect(result.right).toBe(rightOffset)
+    expect(result.bottom).toBe(bottom)
   })
 
-  /**
-   * Test to ensure coverage for the safety guardrail (Line 29).
-   * Validates that the function returns undefined if React refs are
-   * not yet attached to DOM elements.
-   */
-  it('returns undefined if any ref.current is null (unattached)', () => {
-    const unattachedRefs = {
-      mainRef: { current: null },
-      insetRef: { current: null },
-      rightRef: { current: null },
-      actionsRef: { current: null },
-      footerRef: { current: null }
-    }
+  it('portrait mode with zero inset height leaves top unchanged', () => {
+    insetRef.current.offsetHeight = 0
+    mainRef.current.offsetWidth = 500
+    insetRef.current.offsetWidth = 100
 
-    const result = getSafeZoneInset(unattachedRefs)
-    expect(result).toBeUndefined()
+    const result = getSafeZoneInset({ mainRef, insetRef, leftRef, rightRef, actionsRef, footerRef })
+    expect(result.top).toBe(insetRef.current.offsetTop)
+  })
+
+  it('calculates correct bottom using max of actions and footer offsets', () => {
+    mainRef.current.offsetHeight = 600
+    actionsRef.current.offsetTop = 500
+    footerRef.current.offsetTop = 550
+
+    const result = getSafeZoneInset({ mainRef, insetRef, leftRef, rightRef, actionsRef, footerRef })
+
+    const dividerGap = 10
+    const expectedBottom = Math.max(mainRef.current.offsetHeight - actionsRef.current.offsetTop,
+      mainRef.current.offsetHeight - footerRef.current.offsetTop) + dividerGap
+    expect(result.bottom).toBe(expectedBottom)
   })
 })