Density
Adjust row height and spacing for desktop, comfortable, or touch input.
Density adjusts row heights and spacing for different input methods. Set it at creation or change it at runtime:
const pp = createPanel({ density: "compact" });
// later
pp.configure({ density: "touch" });| Value | Use for |
|---|---|
compact | Dense desktop inspectors |
comfortable | Default, balanced spacing |
touch | Larger targets for mobile / touch |
Density is implemented through the same CSS variables
that drive theming — switching density changes --pp-row-height, --pp-gap,
and related spacing tokens, not the layout structure itself.