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

Wrap search controls on small editor widths

GitOrigin-RevId: 513d046ba2951daf13385f48b73704e6feccd7d0

services/web/frontend/js/features/source-editor/extensions/search.ts

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