refactor(ui): use CSS-variable sizing for details panels

Author: Bill Leoutsakos

packages/emcn/src/components/details-panel/details-panel.test.tsx

@@ -1,6 +1,6 @@
 /** @vitest-environment jsdom */
 import { act, createRef } from 'react'
-import { DetailsPanel } from '@sim/emcn'
+import { DetailsPanel, type DetailsPanelProps } from '@sim/emcn'
 import { createRoot } from 'react-dom/client'
 import { expect, it, vi } from 'vitest'
 
@@ -11,11 +11,12 @@ it('forwards resize events and retains content and refs while closed', () => {
   const root = createRoot(container)
   const ref = createRef<HTMLDivElement>()
   const resize = vi.fn()
-  const render = (open: boolean) => (
+  const render = (open: boolean, width: DetailsPanelProps['width'] = 520) => (
     <DetailsPanel
       ref={ref}
       open={open}
-      width={520}
+      width={width}
+      style={{ width: 1, opacity: 0.9 }}
       onResizeStart={resize}
       resizeLabel='Resize details'
       aria-label='Details'
@@ -27,9 +28,13 @@ it('forwards resize events and retains content and refs while closed', () => {
   try {
     act(() => root.render(render(true)))
     const panel = ref.current!
+    expect(panel.style.getPropertyValue('--details-panel-width')).toBe('520px')
+    expect(panel.style.width).toBe('')
+    expect(panel.style.opacity).toBe('0.9')
     expect(panel.hasAttribute('inert')).toBe(false)
     const input = panel.querySelector('input')!
-    const handle = container.querySelector('[role="separator"]')!
+    const handle = container.querySelector<HTMLDivElement>('[role="separator"]')!
+    expect(handle.style.getPropertyValue('--details-panel-width')).toBe('520px')
     expect(handle.getAttribute('aria-label')).toBe('Resize details')
     expect(panel.contains(handle)).toBe(false)
     act(() => handle.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 240 })))
@@ -42,7 +47,9 @@ it('forwards resize events and retains content and refs while closed', () => {
     expect(panel.querySelector('input')).toBe(input)
     expect(input.value).toBe('Retained query')
     expect(container.querySelector('[role="separator"]')).toBeNull()
-    act(() => root.render(render(true)))
+    const responsiveWidth = 'clamp(min(320px, 60vw), 520px, 60vw)'
+    act(() => root.render(render(true, responsiveWidth)))
+    expect(panel.style.getPropertyValue('--details-panel-width')).toBe(responsiveWidth)
     expect(panel.hasAttribute('inert')).toBe(false)
     expect(panel.querySelector('input')).toBe(input)
     expect(container.querySelector('[role="separator"]')).not.toBeNull()

packages/emcn/src/components/details-panel/details-panel.tsx

@@ -26,13 +26,15 @@ export interface DetailsPanelProps extends HTMLAttributes<HTMLDivElement> {
 export const DetailsPanel = forwardRef<HTMLDivElement, DetailsPanelProps>(
   ({ open, width, onResizeStart, resizeLabel, className, style, children, ...props }, ref) => {
     const cssWidth = typeof width === 'number' ? `${width}px` : width
+    const widthStyle = { '--details-panel-width': cssWidth } as CSSProperties
+    const { width: _styleWidth, ...panelStyle } = style ?? {}
 
     return (
       <>
         {open && (
           <div
-            className='absolute top-0 bottom-0 z-[var(--z-dropdown)] w-[8px] cursor-ew-resize'
-            style={{ right: `calc(${cssWidth} - 4px)` }}
+            className='absolute top-0 right-[calc(var(--details-panel-width)-4px)] bottom-0 z-[var(--z-dropdown)] w-[8px] cursor-ew-resize'
+            style={widthStyle}
             onMouseDown={onResizeStart}
             role='separator'
             aria-label={resizeLabel}
@@ -44,11 +46,11 @@ export const DetailsPanel = forwardRef<HTMLDivElement, DetailsPanelProps>(
           ref={ref}
           inert={!open || props.inert}
           className={cn(
-            'absolute top-0 right-0 bottom-0 z-[var(--z-dropdown)] overflow-hidden border-l bg-[var(--bg)] shadow-md transition-transform duration-200 ease-out',
+            'absolute top-0 right-0 bottom-0 z-[var(--z-dropdown)] w-[var(--details-panel-width)] overflow-hidden border-l bg-[var(--bg)] shadow-md transition-transform duration-200 ease-out',
             open ? 'translate-x-0' : 'translate-x-full',
             className
           )}
-          style={{ ...style, width }}
+          style={{ ...panelStyle, ...widthStyle }}
         >
           {children}
         </div>