diff --git a/src/css/custom.css b/src/css/custom.css
index 83d471e0b6..dec597b75e 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -382,6 +382,60 @@ html {
     position: relative;
 }
 
+/* Transfer the search-area visual chrome (background, bottom border, top radius)
+   from .DocSearch-Form to .DocSearch-SearchBar now that our custom controls are
+   siblings of the form rather than children of it. */
+.DocSearch-SearchBar {
+    background: var(--docsearch-searchbox-focus-background);
+    border-bottom: 1px solid var(--docsearch-subtle-color);
+    border-radius: 4px 4px 0 0;
+    align-items: center;
+}
+
+/* Fix .DocSearch-Title — the library sets line-height: 0.5em which causes
+   wrapped lines to overlap, and no word-break so long queries overflow horizontally. */
+.DocSearch-Title {
+    line-height: 1.4 !important;
+    white-space: normal !important;
+    word-break: break-word;
+    overflow-wrap: break-word;
+}
+
+/* Hide the "close the query" text label — keep only the × icon.
+   !important is needed because DocSearch styles are dynamically imported
+   after our CSS, so they would otherwise win the cascade. */
+.DocSearch-Clear {
+    font-size: 0 !important;
+}
+.DocSearch-Clear span {
+    display: none;
+}
+
+/* Strip the duplicate chrome from the form itself. */
+.DocSearch-Form {
+    flex: 1 1 auto;
+    width: auto;
+    background: transparent;
+    border-block-end: none !important;
+    border-radius: 0;
+}
+
+/* On mobile, wrap the custom controls onto their own row below the search input. */
+@media (max-width: 768px) {
+    .DocSearch-SearchBar {
+        flex-wrap: wrap;
+    }
+
+    .search-custom-controls {
+        flex: 0 0 100%;
+        margin-right: 0 !important;
+        padding: 6px 16px 8px;
+        border-bottom: 1px solid var(--docsearch-subtle-color);
+    }
+
+
+}
+
 /* Responsive improvements */
 @media (max-width: 768px) {
     .DocSearch-Button-Keys {
diff --git a/src/theme/SearchBar/index.js b/src/theme/SearchBar/index.js
index 2ebdd418d0..29b89f36ba 100644
--- a/src/theme/SearchBar/index.js
+++ b/src/theme/SearchBar/index.js
@@ -686,24 +686,18 @@ export default function SearchBar() {
     const [modalHeaderEl, setModalHeaderEl] = useState(null);
 
     const onModalOpen = useCallback(() => {
-        // Try to locate the header/searchbar area in the DocSearch modal.
-        // DocSearch v3 uses these classnames.
+        // Target .DocSearch-SearchBar so our controls are a sibling of .DocSearch-Form.
+        // This lets us move them below the search row on mobile via flex-wrap.
         const el =
             document.querySelector('.DocSearch-SearchBar') ||
-            document.querySelector('.DocSearch-Form') ||
             document.querySelector('.DocSearch-Modal');
 
         setModalHeaderEl(el || null);
     }, []);
 
-    // When modalHeaderEl exists, insert filters BEFORE the form input if possible.
-    // We target .DocSearch-Form when present, otherwise the container itself.
     const portalTarget = useMemo(() => {
         if (!modalHeaderEl) return null;
-        return (
-            modalHeaderEl.querySelector('.DocSearch-Form') ||
-            modalHeaderEl
-        );
+        return modalHeaderEl;
     }, [modalHeaderEl]);
 
     // Keep contextualSearch stable to prevent query reset
@@ -724,6 +718,7 @@ export default function SearchBar() {
                 createPortal(
                     // Wrapper to align with DocSearch input
                     <div
+                        className="search-custom-controls"
                         style={{
                             display: 'flex',
                             alignItems: 'center',