@defra/interactive-map 0.0.12-alpha → 0.0.14-alpha

package/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

package/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) {

package/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 = {

package/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>
           )

package/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
   }

package/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

package/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),

package/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 }
 }

package/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)
   })
 })