ensureInBounds

ensureInBounds is a bare use:ref function. At mount it snapshots the element's top-left corner via getBoundingClientRect, then writes a max-width / max-height that keeps the element's right and bottom edges inside the viewport — recomputed on every viewport resize via useDocumentSize. When the box already fits, the clamps are set back to null.

Because the anchor is sampled once, this fits floating panels — popovers, dropdowns, color pickers, tooltips — whose top-left anchor doesn't move during their lifetime. If the anchor moves, drop and re-attach the ref. Part of pota/use/resize.

Arguments

ensureInBounds is used directly as a ref — you pass the function itself, not a call. It receives the element node from use:ref.

Argument	Type	Description
node	HTMLElement	The element to clamp, supplied by use:ref.

Examples

Clamp a panel to the viewport

Attaches ensureInBounds to a panel pinned at a fixed top-left position — the anchor the helper's snapshot relies on. Shrink the window and the panel's max-width / max-height shrink so it stays fully visible.

import { render } from 'pota'
import { ensureInBounds } from 'pota/use/resize'

function App() {
	return (
		<div
			use:ref={ensureInBounds}
			style={{
				position: 'fixed',
				top: '20px',
				left: '20px',
				width: '320px',
				height: '480px',
				padding: '1rem',
				border: '1px solid #aaa',
				overflow: 'auto',
			}}
		>
			a floating panel that never overflows the viewport
		</div>
	)
}

render(App)