Function

useFitScale

useFitScale(naturalHeight: number): FitScale
Client hook: how far to shrink fixed-size content so it fits its container.
Parameters
- naturalHeight: number
  The content's unscaled height in pixels
Returns FitScale
A ref for the container, and the scale to apply to the content
Remarks
For content drawn at fixed pixel sizes that has to fit a box whose height is not known in advance — the guide's mock iPhone inside a modal being the motivating case.

It measures rather than guessing. An earlier attempt used @media (max-height: …) steps, which are guesses about device heights and were wrong on the first real phone they met; the browser knows the actual number and this asks it.

Never returns more than 1. The content is drawn at fixed pixel sizes, so scaling past its natural size only blurs it, and the extra room is better spent as whitespace.

Apply the result with transform: scale(), which leaves the layout box at its natural height. Give the measured container overflow: hidden so that untouched height cannot produce a scrollbar — otherwise the shrinking is cosmetic and the scroll it was meant to remove stays.
Example
```
const { ref, scale } = useFitScale(PHONE_HEIGHT);

<div ref={ref} className="min-h-0 flex-1 overflow-hidden">
  <div style={{ transform: `scale(${scale})`, transformOrigin: "top center" }}>
    <Phone />
  </div>
</div>
```
- Defined in hooks/use-fit-scale/use-fit-scale.ts:48