diff options
Diffstat (limited to 'src/components/AmbientControl.tsx')
| -rw-r--r-- | src/components/AmbientControl.tsx | 9 |
1 files changed, 7 insertions, 2 deletions
diff --git a/src/components/AmbientControl.tsx b/src/components/AmbientControl.tsx index 9eabb09..dd58235 100644 --- a/src/components/AmbientControl.tsx +++ b/src/components/AmbientControl.tsx @@ -24,15 +24,18 @@ export function AmbientControl() { style={{ display: 'flex', alignItems: 'center', + flexWrap: 'wrap', gap: '12px', + rowGap: '8px', padding: '8px 10px', border: '1px solid var(--line-2)', borderRadius: 'var(--r-3)', background: 'rgba(17, 21, 28, 0.85)', boxShadow: 'var(--shadow-1)', + minWidth: 0, }} > - <div style={{ display: 'flex', flexDirection: 'column', gap: '2px', minWidth: '90px' }}> + <div style={{ display: 'flex', flexDirection: 'column', gap: '2px', minWidth: '90px', flex: '1 1 180px' }}> <span className="eyebrow" style={{ letterSpacing: '0.14em' }}> Ambient </span> @@ -41,6 +44,7 @@ export function AmbientControl() { fontFamily: 'var(--font-sans)', fontSize: '12px', color: available ? 'var(--fg-3)' : 'var(--negative)', + lineHeight: 1.4, }} > {available ? 'Looping background audio' : 'Add rain.ogg, cafe.ogg, or white_noise.ogg'} @@ -61,6 +65,7 @@ export function AmbientControl() { padding: '6px 10px', outline: 'none', minWidth: '132px', + flex: '0 0 auto', }} > {SOUND_OPTIONS.map((option) => ( @@ -70,7 +75,7 @@ export function AmbientControl() { ))} </select> - <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}> + <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flex: '0 0 auto' }}> <input type="range" min={0} |