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

package/src/App/hooks/useVisibleGeometry.js

@@ -31,14 +31,8 @@ export const getPointCoordinates = (geojson) => {
   return null
 }
 
-const SLOT_REFS = {
-  inset: 'insetRef',
-  bottom: 'bottomRef',
-  side: 'sideRef'
-}
-
 export const useVisibleGeometry = () => {
-  const { mapProvider, eventBus } = useConfig()
+  const { id, mapProvider, eventBus } = useConfig()
   const { layoutRefs, panelConfig, panelRegistry, breakpoint } = useApp()
 
   const latestRef = useRef({ layoutRefs, panelConfig, panelRegistry, breakpoint })
@@ -49,14 +43,13 @@ export const useVisibleGeometry = () => {
       return undefined
     }
 
-    const handlePanelOpened = ({ panelId, slot: eventSlot, visibleGeometry: eventVisibleGeometry }) => {
-      const { panelConfig: config, panelRegistry: registry, layoutRefs: refs, breakpoint: bp } = latestRef.current
+    const handlePanelOpened = ({ panelId, visibleGeometry: eventVisibleGeometry }) => {
+      const { panelConfig: config, panelRegistry: registry } = latestRef.current
       const resolvedConfig = config?.[panelId] ? config : (registry?.getPanelConfig() ?? config)
       const visibleGeometry = eventVisibleGeometry ?? resolvedConfig?.[panelId]?.visibleGeometry
-      const slot = eventSlot ?? resolvedConfig?.[panelId]?.[bp]?.slot
-      const slotRef = refs[SLOT_REFS[slot]]
+      const panel = layoutRefs.appContainerRef.current?.querySelector(`#${id}-panel-${panelId}`)
 
-      if (!visibleGeometry || !slotRef) {
+      if (!visibleGeometry) {
         return
       }
       if (typeof mapProvider.isGeometryObscured !== 'function') {
@@ -64,7 +57,8 @@ export const useVisibleGeometry = () => {
       }
 
       const waitForPanel = () => {
-        const panelRect = slotRef.current?.getBoundingClientRect()
+        if (!panel) { return }
+        const panelRect = panel.getBoundingClientRect()
 
         if (!panelRect || panelRect.width === 0 || panelRect.height === 0) {
           // Not ready yet, check on the next animation frame

package/src/App/hooks/useVisibleGeometry.test.js

@@ -10,8 +10,16 @@ const pointFeature = { type: 'Feature', geometry: { type: 'Point', coordinates:
 const multiPointFeature = { type: 'Feature', geometry: { type: 'MultiPoint', coordinates: [[1, 51], [2, 52]] }, properties: {} }
 const polygonFeature = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }, properties: {} }
 
-const insetPanelRect = { left: 600, top: 0, right: 1000, bottom: 800, width: 400, height: 800 }
-const bottomPanelRect = { left: 0, top: 500, right: 1000, bottom: 800, width: 1000, height: 300 }
+const APP_ID = 'test'
+const panelRect = { left: 600, top: 0, right: 1000, bottom: 800, width: 400, height: 800 }
+
+// Creates a panel DOM element with id matching what useVisibleGeometry queries.
+const makePanelEl = (panelId, rect = panelRect) => {
+  const el = document.createElement('div')
+  el.id = `${APP_ID}-panel-${panelId}`
+  el.getBoundingClientRect = jest.fn(() => rect)
+  return el
+}
 
 const setup = (overrides = {}) => {
   const capturedHandlers = {}
@@ -27,19 +35,18 @@ const setup = (overrides = {}) => {
     ...overrides.eventBus
   }
 
-  const insetEl = document.createElement('div')
-  insetEl.getBoundingClientRect = jest.fn(() => insetPanelRect)
-  const bottomEl = document.createElement('div')
-  bottomEl.getBoundingClientRect = jest.fn(() => bottomPanelRect)
+  // appContainerRef holds panel elements that the hook queries by id
+  const appContainer = document.createElement('div')
+  const myPanelEl = makePanelEl('myPanel')
+  appContainer.appendChild(myPanelEl)
 
   const layoutRefs = {
     mainRef: { current: document.createElement('div') },
-    insetRef: { current: insetEl },
-    bottomRef: { current: bottomEl },
+    appContainerRef: { current: appContainer },
     ...overrides.layoutRefs
   }
   const panelConfig = {
-    myPanel: { visibleGeometry: polygonFeature, desktop: { slot: 'inset' } },
+    myPanel: { visibleGeometry: polygonFeature, desktop: { slot: 'left-top' } },
     emptyPanel: {},
     ...overrides.panelConfig
   }
@@ -48,10 +55,10 @@ const setup = (overrides = {}) => {
     ...overrides.panelRegistry
   }
 
-  useConfig.mockReturnValue({ mapProvider, eventBus, ...overrides.config })
+  useConfig.mockReturnValue({ id: APP_ID, mapProvider, eventBus, ...overrides.config })
   useApp.mockReturnValue({ layoutRefs, panelConfig, panelRegistry, breakpoint: 'desktop', ...overrides.app })
 
-  return { mapProvider, eventBus, capturedHandlers, layoutRefs, panelConfig, insetEl, bottomEl }
+  return { mapProvider, eventBus, capturedHandlers, layoutRefs, panelConfig, myPanelEl, appContainer }
 }
 
 describe('useVisibleGeometry', () => {
@@ -102,12 +109,14 @@ describe('useVisibleGeometry', () => {
     expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
   })
 
-  test('does nothing when panel has visibleGeometry but no slot config', () => {
+  test('does nothing when panel element is not in the DOM', () => {
+    // Panel has visibleGeometry and slot config but its DOM element is not mounted yet
     const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { noSlotPanel: { visibleGeometry: polygonFeature } }
+      panelConfig: { noElPanel: { visibleGeometry: polygonFeature, desktop: { slot: 'left-top' } } }
     })
     renderHook(() => useVisibleGeometry())
-    capturedHandlers['app:panelopened']({ panelId: 'noSlotPanel' })
+    capturedHandlers['app:panelopened']({ panelId: 'noElPanel' })
+    jest.runAllTimers()
     expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
   })
 
@@ -118,19 +127,20 @@ describe('useVisibleGeometry', () => {
     expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
   })
 
-  test('does nothing when slot ref has zero dimensions (panel not visible)', () => {
-    const zeroEl = document.createElement('div')
-    zeroEl.getBoundingClientRect = jest.fn(() => ({ left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0 }))
+  test('does nothing when panel element has zero dimensions (panel not yet visible)', () => {
+    const zeroRect = { left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0 }
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('myPanel', zeroRect))
     const { mapProvider, capturedHandlers } = setup({
       layoutRefs: {
         mainRef: { current: document.createElement('div') },
-        insetRef: { current: zeroEl }
+        appContainerRef: { current: appContainer }
       }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
 
-    // Run the current pending animation frame
+    // Run only the first pending animation frame — panel has zero size so it reschedules
     jest.runOnlyPendingTimers()
 
     expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
@@ -151,14 +161,17 @@ describe('useVisibleGeometry', () => {
     capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
     jest.runAllTimers()
 
-    expect(mapProvider.isGeometryObscured).toHaveBeenCalledWith(polygonFeature, insetPanelRect)
+    expect(mapProvider.isGeometryObscured).toHaveBeenCalledWith(polygonFeature, panelRect)
     expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
     expect(mapProvider.setView).not.toHaveBeenCalled()
   })
 
   test('calls setView with center for Point geometry when obscured', () => {
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('pointPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { pointPanel: { visibleGeometry: pointFeature, desktop: { slot: 'inset' } } }
+      panelConfig: { pointPanel: { visibleGeometry: pointFeature, desktop: { slot: 'left-top' } } },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'pointPanel' })
@@ -169,8 +182,11 @@ describe('useVisibleGeometry', () => {
   })
 
   test('calls setView with first coordinate for MultiPoint geometry when obscured', () => {
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('mpPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { mpPanel: { visibleGeometry: multiPointFeature, desktop: { slot: 'inset' } } }
+      panelConfig: { mpPanel: { visibleGeometry: multiPointFeature, desktop: { slot: 'left-top' } } },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'mpPanel' })
@@ -182,8 +198,11 @@ describe('useVisibleGeometry', () => {
 
   test('calls fitToBounds for a raw non-Feature geometry (e.g. Polygon) when obscured', () => {
     const rawPolygon = { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('geoPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { geoPanel: { visibleGeometry: rawPolygon, desktop: { slot: 'inset' } } }
+      panelConfig: { geoPanel: { visibleGeometry: rawPolygon, desktop: { slot: 'left-top' } } },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'geoPanel' })
@@ -194,8 +213,11 @@ describe('useVisibleGeometry', () => {
 
   test('calls setView for a raw Point geometry (not Feature-wrapped) when obscured', () => {
     const rawPoint = { type: 'Point', coordinates: [1, 51] }
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('rawPointPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { rawPointPanel: { visibleGeometry: rawPoint, desktop: { slot: 'inset' } } }
+      panelConfig: { rawPointPanel: { visibleGeometry: rawPoint, desktop: { slot: 'left-top' } } },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'rawPointPanel' })
@@ -206,8 +228,11 @@ describe('useVisibleGeometry', () => {
 
   test('does not call setView when Point feature has null coordinates', () => {
     const nullCoordsFeature = { type: 'Feature', geometry: { type: 'Point', coordinates: null }, properties: {} }
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('nullPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { nullPanel: { visibleGeometry: nullCoordsFeature, desktop: { slot: 'inset' } } }
+      panelConfig: { nullPanel: { visibleGeometry: nullCoordsFeature, desktop: { slot: 'left-top' } } },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'nullPanel' })
@@ -216,26 +241,14 @@ describe('useVisibleGeometry', () => {
     expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
   })
 
-  test('uses bottom slot ref when panel is in bottom slot', () => {
-    const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { bottomPanel: { visibleGeometry: polygonFeature, desktop: { slot: 'bottom' } } }
-    })
-    renderHook(() => useVisibleGeometry())
-    capturedHandlers['app:panelopened']({ panelId: 'bottomPanel' })
-    jest.runAllTimers()
-
-    expect(mapProvider.isGeometryObscured).toHaveBeenCalledWith(polygonFeature, bottomPanelRect)
-    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
-  })
-
   test('uses latest panelConfig via ref when it changes between renders', () => {
-    const { mapProvider, capturedHandlers, insetEl } = setup()
+    const { mapProvider, capturedHandlers, appContainer } = setup()
     const { rerender } = renderHook(() => useVisibleGeometry())
 
     const updatedGeometry = { type: 'Feature', geometry: { type: 'LineString', coordinates: [[0, 0], [1, 1]] }, properties: {} }
-    const updatedPanelConfig = { myPanel: { visibleGeometry: updatedGeometry, desktop: { slot: 'inset' } } }
+    const updatedPanelConfig = { myPanel: { visibleGeometry: updatedGeometry, desktop: { slot: 'left-top' } } }
     useApp.mockReturnValue({
-      layoutRefs: { mainRef: { current: document.createElement('div') }, insetRef: { current: insetEl } },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } },
       panelConfig: updatedPanelConfig,
       panelRegistry: { getPanelConfig: jest.fn(() => updatedPanelConfig) },
       breakpoint: 'desktop'
@@ -249,20 +262,26 @@ describe('useVisibleGeometry', () => {
 
   test('uses slot from event payload when registry config lacks slot info', () => {
     const freshGeometry = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }, properties: {} }
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('freshPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelRegistry: { getPanelConfig: jest.fn(() => ({ freshPanel: { visibleGeometry: freshGeometry } })) }
+      panelRegistry: { getPanelConfig: jest.fn(() => ({ freshPanel: { visibleGeometry: freshGeometry } })) },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     // Event includes slot (as middleware provides for ADD_PANEL); registry config has no slot info
-    capturedHandlers['app:panelopened']({ panelId: 'freshPanel', slot: 'inset' })
+    capturedHandlers['app:panelopened']({ panelId: 'freshPanel', slot: 'left-top' })
     jest.runAllTimers()
     expect(mapProvider.fitToBounds).toHaveBeenCalledWith(freshGeometry)
   })
 
   test('falls back to panelRegistry for panels not yet in stale panelConfig', () => {
     const freshGeometry = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }, properties: {} }
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('freshPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelRegistry: { getPanelConfig: jest.fn(() => ({ freshPanel: { visibleGeometry: freshGeometry, desktop: { slot: 'inset' } } })) }
+      panelRegistry: { getPanelConfig: jest.fn(() => ({ freshPanel: { visibleGeometry: freshGeometry, desktop: { slot: 'left-top' } } })) },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'freshPanel' })
@@ -271,13 +290,16 @@ describe('useVisibleGeometry', () => {
   })
 
   test('falls back to config when panel not in panelConfig and registry returns null', () => {
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('missingPanel'))
     const { mapProvider, capturedHandlers } = setup({
       panelConfig: {}, // panel not present
-      panelRegistry: { getPanelConfig: jest.fn(() => null) } // registry returns null
+      panelRegistry: { getPanelConfig: jest.fn(() => null) }, // registry returns null
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
 
     renderHook(() => useVisibleGeometry())
-    capturedHandlers['app:panelopened']({ panelId: 'missingPanel', visibleGeometry: polygonFeature, slot: 'inset' })
+    capturedHandlers['app:panelopened']({ panelId: 'missingPanel', visibleGeometry: polygonFeature, slot: 'left-top' })
     jest.runAllTimers()
     // Should still call fitToBounds using visibleGeometry from event payload
     expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
@@ -285,11 +307,14 @@ describe('useVisibleGeometry', () => {
 
   test('uses visibleGeometry from event payload directly, bypassing registry (ADD_PANEL first-click case)', () => {
     // Registry is empty — simulates first ADD_PANEL before React has processed the reducer
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('newPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelRegistry: { getPanelConfig: jest.fn(() => ({})) }
+      panelRegistry: { getPanelConfig: jest.fn(() => ({})) },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
-    capturedHandlers['app:panelopened']({ panelId: 'newPanel', slot: 'inset', visibleGeometry: polygonFeature })
+    capturedHandlers['app:panelopened']({ panelId: 'newPanel', slot: 'left-top', visibleGeometry: polygonFeature })
     jest.runAllTimers()
     expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
   })

package/src/App/layout/Layout.jsx

@@ -63,20 +63,25 @@ export const Layout = () => {
               <SlotRenderer slot={layoutSlots.TOP_RIGHT} />
             </div>
           </div>
-          <div className='im-o-app__inset' ref={layoutRefs.insetRef}>
-            <SlotRenderer slot={layoutSlots.INSET} />
+          <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 />

package/src/App/layout/Layout.test.jsx

@@ -37,7 +37,6 @@ describe('Layout', () => {
     topRef: React.createRef(),
     topLeftColRef: React.createRef(),
     topRightColRef: React.createRef(),
-    insetRef: React.createRef(),
     rightRef: React.createRef(),
     footerRef: React.createRef(),
     actionsRef: React.createRef()

package/src/App/layout/layout.module.scss

@@ -139,12 +139,49 @@
   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);
+  gap: var(--divider-gap);
+
+  & > *:empty {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: bottom 0.15s ease;
+  }
+}
+
+.im-o-app__left-top {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-height: 0;
+  position: relative;
+  gap: var(--divider-gap);
+}
+
+.im-o-app__left-bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+  min-height: 0;
+  margin-top: auto;
+  position: relative;
+  gap: var(--divider-gap);
 }
 
 // ---------------------------------------------------
@@ -164,7 +201,7 @@
 }
 
 // ---------------------------------------------------
-// Right: Buttons and inset panel
+// Right: Buttons and panels
 // ---------------------------------------------------
 
 .im-o-app__right {
@@ -174,18 +211,30 @@
   right: var(--primary-gap);
   top: var(--right-offset-top);
   bottom: var(--right-offset-bottom);
+  gap: var(--divider-gap);
+
+  @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-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);
 }
 
 // ---------------------------------------------------
@@ -301,10 +350,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 +395,9 @@
 
   [class*="im-c-panel--"][class*="-button"] { // Adjacent to button
     inset: var(--modal-inset);
+    max-height: var(--modal-max-height);
   }
+
 }
 
 // Mobile and tablet
@@ -378,7 +452,6 @@
     width: 100%;
     left: 0;
     bottom: calc(var(--primary-gap) * 2);
-    padding-left: var(--offset-left);
     
     .im-c-panel {
       max-width: var(--action-bar-max-width);

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.
@@ -15,13 +14,20 @@ export const getSlotRef = (slot, layoutRefs) => {
     banner: layoutRefs.bannerRef,
     '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 +85,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

@@ -14,8 +14,8 @@ jest.mock('../components/Panel/Panel.jsx', () => ({
 }))
 jest.mock('./slots.js', () => ({
   allowedSlots: {
-    panel: ['inset', 'side', 'modal', 'bottom'],
-    control: ['inset', 'banner', 'bottom', 'actions']
+    panel: ['left-top', 'side', 'modal', 'bottom'],
+    control: ['left-top', 'banner', 'bottom', 'actions']
   }
 }))
 
@@ -25,7 +25,7 @@ jest.mock('./slots.js', () => ({
  */
 const SlotHarness = ({ layoutRefs, children }) => (
   <div>
-    <div ref={layoutRefs.insetRef} data-slot='inset' />
+    <div ref={layoutRefs.leftTopRef} data-slot='left-top' />
     <div ref={layoutRefs.sideRef} data-slot='side' />
     <div ref={layoutRefs.modalRef} data-slot='modal' />
     <div ref={layoutRefs.bottomRef} data-slot='bottom' />
@@ -45,7 +45,7 @@ describe('HtmlElementHost', () => {
       bannerRef: { current: null },
       topLeftColRef: { current: null },
       topRightColRef: { current: null },
-      insetRef: { current: null },
+      leftTopRef: { current: null },
       middleRef: { current: null },
       bottomRef: { current: null },
       actionsRef: { current: null },
@@ -105,10 +105,10 @@ describe('HtmlElementHost', () => {
 
   it('projects open panel into correct slot', () => {
     const { container } = renderWithSlots({
-      panelConfig: { p1: { html: '<p>Hi</p>', label: 'Test', desktop: { slot: 'inset' } } },
+      panelConfig: { p1: { html: '<p>Hi</p>', label: 'Test', desktop: { slot: 'left-top' } } },
       openPanels: { p1: { props: {} } }
     })
-    expect(container.querySelector('[data-slot="inset"] [data-testid="panel-p1"]')).toBeTruthy()
+    expect(container.querySelector('[data-slot="left-top"] [data-testid="panel-p1"]')).toBeTruthy()
   })
 
   it('hides panel when closed and passes isOpen=false', () => {
@@ -130,19 +130,28 @@ describe('HtmlElementHost', () => {
 
   it('hides panel with inline:false when not fullscreen', () => {
     const { getByTestId } = renderWithSlots({
-      panelConfig: { p1: { html: '<p>Hi</p>', label: 'Test', desktop: { slot: 'inset' }, inline: false } },
+      panelConfig: { p1: { html: '<p>Hi</p>', label: 'Test', desktop: { slot: 'left-top' }, inline: false } },
       openPanels: { p1: { props: {} } },
       isFullscreen: false
     })
     expect(getByTestId('panel-p1').style.display).toBe('none')
   })
 
-  it('resolves bottom slot to inset on desktop', () => {
+  it('shows panel with inline:false when fullscreen', () => {
+    const { getByTestId } = renderWithSlots({
+      panelConfig: { p1: { html: '<p>Hi</p>', label: 'Test', desktop: { slot: 'left-top' }, inline: false } },
+      openPanels: { p1: { props: {} } },
+      isFullscreen: true
+    })
+    expect(getByTestId('panel-p1').dataset.open).toBe('true')
+  })
+
+  it('resolves bottom slot to left-top on desktop', () => {
     const { container } = renderWithSlots({
       panelConfig: { p1: { html: '<p>Hi</p>', label: 'Test', desktop: { slot: 'bottom' } } },
       openPanels: { p1: { props: {} } }
     })
-    expect(container.querySelector('[data-slot="inset"] [data-testid="panel-p1"]')).toBeTruthy()
+    expect(container.querySelector('[data-slot="left-top"] [data-testid="panel-p1"]')).toBeTruthy()
     expect(container.querySelector('[data-slot="bottom"] [data-testid="panel-p1"]')).toBeNull()
   })
 
@@ -169,9 +178,9 @@ describe('HtmlElementHost', () => {
 
   it('projects visible control into correct slot', () => {
     const { container } = renderWithSlots({
-      controlConfig: { c1: { id: 'c1', html: '<input type="checkbox">', desktop: { slot: 'inset' } } }
+      controlConfig: { c1: { id: 'c1', html: '<input type="checkbox">', desktop: { slot: 'left-top' } } }
     })
-    const control = container.querySelector('[data-slot="inset"] .im-c-control')
+    const control = container.querySelector('[data-slot="left-top"] .im-c-control')
     expect(control).toBeTruthy()
     expect(control.innerHTML).toBe('<input type="checkbox">')
   })
@@ -292,6 +301,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>
           )