Merge pull request #20709 from overleaf/dp-search-wrapping

Wrap search controls on small editor widths

GitOrigin-RevId: 513d046ba2951daf13385f48b73704e6feccd7d0
This commit is contained in:
David 2024-10-04 10:15:38 +01:00 committed by Copybot
parent 4480a986a3
commit b2dab4b1c0

View file

@ -265,6 +265,7 @@ const searchFormTheme = EditorView.theme({
'inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%)', 'inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%)',
'--ol-cm-search-form-error-shadow': '--ol-cm-search-form-error-shadow':
'inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--input-shadow-danger-color)', 'inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--input-shadow-danger-color)',
containerType: 'inline-size',
}, },
'.ol-cm-search-controls': { '.ol-cm-search-controls': {
display: 'grid', display: 'grid',
@ -272,6 +273,11 @@ const searchFormTheme = EditorView.theme({
gridTemplateRows: 'auto auto', gridTemplateRows: 'auto auto',
gap: '10px', gap: '10px',
}, },
'@container (max-width: 450px)': {
'.ol-cm-search-controls': {
gridTemplateColumns: 'auto',
},
},
'.ol-cm-search-form-row': { '.ol-cm-search-form-row': {
display: 'flex', display: 'flex',
gap: '10px', gap: '10px',