Fotos
Resizable side panel with snap points
A details panel you stretch from its handle that snaps to three widths; its content rearranges itself with container queries.
Settings
Code
<div class="uvq13-rsz"><p class="tt">Photos</p><div class="gr"><button type="button" class="ph" style="--a:#f97316;--b:#7c3aed" data-d="4032 × 3024" aria-label="IMG_0412.jpg" aria-haspopup="dialog"></button><button type="button" class="ph" style="--a:#0ea5e9;--b:#14532d" data-d="3024 × 4032" aria-label="IMG_0418.jpg" aria-haspopup="dialog"></button><button type="button" class="ph" style="--a:#facc15;--b:#dc2626" data-d="4032 × 2268" aria-label="IMG_0433.jpg" aria-haspopup="dialog"></button><button type="button" class="ph" style="--a:#64748b;--b:#0f172a" data-d="4032 × 3024" aria-label="IMG_0451.jpg" aria-haspopup="dialog"></button><button type="button" class="ph" style="--a:#f472b6;--b:#0e7490" data-d="3024 × 3024" aria-label="IMG_0460.jpg" aria-haspopup="dialog"></button><button type="button" class="ph" style="--a:#a3e635;--b:#166534" data-d="4032 × 3024" aria-label="IMG_0477.jpg" aria-haspopup="dialog"></button></div><span class="snap" aria-hidden="true"><i style="--d:7.5"></i><i style="--d:11.5"></i><i style="--d:16"></i></span><aside class="pn" role="dialog" aria-labelledby="uvq13-rsz-n"><div class="hd" role="separator" tabindex="0" aria-orientation="vertical" aria-label="Panel width" aria-valuemin="0" aria-valuemax="2" aria-valuenow="1"><i></i></div><div class="in"><header><b class="fn" id="uvq13-rsz-n"></b><button type="button" class="x" aria-label="Close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></header><i class="pre" aria-hidden="true"></i><dl class="mt"><div><dt>Dimensions</dt><dd class="dd"></dd></div><div><dt>Size</dt><dd>4,2 MB</dd></div><div><dt>Camera</dt><dd>f/1.8 · 1/250</dd></div><div><dt>Date</dt><dd>12/10/2026</dd></div></dl><div class="act"><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11M7.5 10.5L12 15l4.5-4.5M5 19.5h14"/></svg><span>Download</span></button><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 7h14M10 11v6M14 11v6M6.5 7l1 12.5h9l1-12.5M9.5 7V4.5h5V7"/></svg><span>Delete</span></button></div></div></aside></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Inspector panels never have the right width, so this one lets people choose. Drag the handle and the panel follows, dashed guides show three snap widths and letting go springs to the nearest one, or closes it if you pull it almost shut. It fits photo libraries, file managers, admin tables and mail clients.
The main color is the handle and the primary action, the second one its soft background. The handle is a separator you can focus and move with the arrow keys, Home and End, and Escape closes the panel with focus back on the selected item.