From a09f468e51c8dfcd04f3dfac4ddfeac7182e7ef2 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Fri, 4 Oct 2024 10:15:38 +0100
Subject: [PATCH] Merge pull request #20709 from overleaf/dp-search-wrapping

Wrap search controls on small editor widths

GitOrigin-RevId: 513d046ba2951daf13385f48b73704e6feccd7d0
---
 .../frontend/js/features/source-editor/extensions/search.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/services/web/frontend/js/features/source-editor/extensions/search.ts b/services/web/frontend/js/features/source-editor/extensions/search.ts
index 59859da7dd..1a5d15c4c4 100644
--- a/services/web/frontend/js/features/source-editor/extensions/search.ts
+++ b/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',