> ## Documentation Index
> Fetch the complete documentation index at: https://docs.telepatia.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Responsive Panel Size

> Automatically adapts the floating panel on smaller screens by reducing width, spacing, and zoom so the EMR keeps more usable space.

Automatically adapts the floating panel on smaller screens by reducing width, spacing, and zoom so the EMR keeps more usable space.

The panel resolves a viewport size tier with `usePanelScale`. Viewports at or below the configured width threshold enter size S, applying `zoom: 0.85`, a narrower shell, and tighter insets/paddings.

In the loaded-session view, size S uses a 280px shell instead of the regular 400px shell. The appointment card also tightens its radius, padding, and vertical gaps. Positioning and drag bounds account for the scaled width so the panel stays inside the viewport after resize or restore.

The prototype includes Regular and Compact size controls to preview both layouts without changing browser size.