// layout scroll
state: {expanded ? 'expanded' : 'rest'}
({
alignSelf: 'flex-start',
fontFamily: 'var(--brut-mono, monospace)',
fontSize: '0.6875rem',
textTransform: 'uppercase',
letterSpacing: '0.08em',
border: '1px solid var(--brut-accent, #247768)',
background: 'var(--brut-accent-soft, rgba(36, 119, 104, 0.1))',
color: 'var(--brut-accent, #247768)',
padding: '0.5rem 0.875rem',
cursor: 'pointer'
}))}
>
{expanded ? 'shrink box' : 'expand box →'}
without layoutScroll
drifts on scroll
({
width: expanded ? sizeExpanded : sizeRest,
height: expanded ? sizeExpanded : sizeRest,
border: '1px solid var(--brut-ink, #0a0a0a)',
background: 'var(--brut-ink, #0a0a0a)',
margin: '0 auto'
}))}
>
with layoutScroll
stays anchored
({
width: expanded ? sizeExpanded : sizeRest,
height: expanded ? sizeExpanded : sizeRest,
border: '1px solid var(--brut-accent, #247768)',
background: 'var(--brut-accent, #247768)',
margin: '0 auto'
}))}
>