From 9c651d3f189ab2d67de07826304cfa2ac96ef7ef Mon Sep 17 00:00:00 2001
From: Pierre Wizla <4233866+pwizla@users.noreply.github.com>
Date: Mon, 17 Nov 2025 15:23:26 +0100
Subject: [PATCH 1/3] Add info for Vite server re. allowed hosts

---
 .../docs/cms/configurations/admin-panel.md    | 32 +++++++++++++++++++
 .../SideBySideContainer.jsx                   | 18 ++---------
 docusaurus/src/scss/_base.scss                | 12 +++----
 docusaurus/src/theme/SearchBar/index.js       | 21 +++++++++---
 4 files changed, 56 insertions(+), 27 deletions(-)

diff --git a/docusaurus/docs/cms/configurations/admin-panel.md b/docusaurus/docs/cms/configurations/admin-panel.md
index d8ac77d8d8..c87456800f 100644
--- a/docusaurus/docs/cms/configurations/admin-panel.md
+++ b/docusaurus/docs/cms/configurations/admin-panel.md
@@ -118,6 +118,38 @@ export default ({ env }) => ({
 </TabItem>
 </Tabs>
 
+### Trust additional hosts during development
+
+When you run `strapi develop`, the admin panel is served through a Vite development server that Strapi boots in [middleware mode](https://vite.dev/config/server-options#server-middlewaremode) and proxies through the Koa app. By default, Vite validates the `Host` header against a small set of safe values. Requests that do not match are rejected with an "Invalid Host" response, which prevents you from previewing the admin panel when it is reached through a tunnel, reverse proxy, or custom domain. Strapi exposes Vite's [`server.allowedHosts`](https://vite.dev/config/server-options.html#server-allowedhosts) option so that you can extend that allowlist when necessary.
+
+#### How Strapi loads custom Vite configuration
+
+During development Strapi builds a base Vite configuration, then tries to load a user-supplied config from `./src/admin/vite.config.{js,ts,mjs}`. If the file exports a function it is invoked with the base configuration and Strapi uses the returned value. The project templates ship with an example file that simply merges a custom alias into the provided configuration, which is a good starting point for your own overrides.
+
+#### Allow additional hosts
+
+Create `./src/admin/vite.config.ts` (or `.js`) if it does not already exist and extend the dev-server configuration. The following example snippet adds 2 custom domains while keeping the rest of Strapi's defaults untouched:
+
+```ts title="src/admin/vite.config.ts"
+import { mergeConfig, type UserConfig } from 'vite';
+
+export default (config: UserConfig) => {
+  return mergeConfig(config, {
+    server: {
+      allowedHosts: ['preview.my-app.test', '.example-proxy.internal'],
+    },
+  });
+};
+```
+
+A few tips while configuring `allowedHosts`:
+
+- Pass a string array or `'all'`, matching Vite's accepted shapes.
+- Leading dots (`.example.com`) allow any subdomain.
+- Combine this option with Strapi's existing `hmr.clientPort` setting when accessing the admin panel through tunnels that rewrite ports.
+
+After saving the file, restart `strapi develop`. Vite will now trust requests whose `Host` header matches the entries you provided, so proxied or tunneled URLs will load without triggering host validation errors.
+
 ### Deploy on different servers {#deploy-on-different-servers}
 
 Unless you chose to deploy Strapi's back-end server and admin panel server on different servers, by default:
diff --git a/docusaurus/src/components/SideBySide/SideBySideContainer/SideBySideContainer.jsx b/docusaurus/src/components/SideBySide/SideBySideContainer/SideBySideContainer.jsx
index 467fe21b1b..17bc073d97 100644
--- a/docusaurus/src/components/SideBySide/SideBySideContainer/SideBySideContainer.jsx
+++ b/docusaurus/src/components/SideBySide/SideBySideContainer/SideBySideContainer.jsx
@@ -5,36 +5,22 @@ import styles from './side-by-side-container.module.scss';
 export function SideBySideContainer({ className, spaced = true, ...rest }) {
   return (
     <>
-      {/* Styles to increase the page-content width */}
       <style
         id="side-by-side-container--styles-overrides"
         dangerouslySetInnerHTML={{
           __html: `
-            /**
-             * Overrides applied by the component 'SideBySideContainer'
-             */
             @media (min-width: 997px) {
-
-              /**
-               * Increase the general container size
-               */
               main article:first-child:not(.col),
               main article:first-child:not(.col) + nav {
-                --custom-main-width: 120rem;
+                max-width: 1200px !important;
               }
             }
 
             @media (max-width: 1536px) {
-              /**
-               * Hide the right-side nav (table of contents)
-               */
               .container > .row > .col.col--3 {
                 display: none;
               }
 
-              /**
-               * Increase the content-column size
-               */
               .container > .row > .col:first-child {
                 max-width: 100% !important;
               }
@@ -53,4 +39,4 @@ export function SideBySideContainer({ className, spaced = true, ...rest }) {
       />
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/docusaurus/src/scss/_base.scss b/docusaurus/src/scss/_base.scss
index 2b9f09b605..4c928697b1 100644
--- a/docusaurus/src/scss/_base.scss
+++ b/docusaurus/src/scss/_base.scss
@@ -13,14 +13,14 @@
   color: var(--custom-selection-color, var(--strapi-neutral-0));
 }
 
-main {
+html body main {
   article:first-child:not(.col):not(.custom-doc-card),
   article:first-child:not(.col) + nav {
-    max-width: 608px;
+    max-width: 608px !important;
     padding-left: 0 !important;
     padding-right: 0 !important;
-    margin-left: auto;
-    margin-right: auto;
+    margin-left: auto !important;
+    margin-right: auto !important;
   }
 }
 
@@ -51,10 +51,10 @@ main {
 
 /** Responsive */
 @include medium-up {
-  main {
+  html body main {
     article:first-child:not(.col),
     article:first-child:not(.col) + nav {
-      max-width: 672px;
+      max-width: 672px !important;
       padding-left: 32px !important;
       padding-right: 32px !important;
     }
diff --git a/docusaurus/src/theme/SearchBar/index.js b/docusaurus/src/theme/SearchBar/index.js
index 0929206a4b..83c3f75324 100644
--- a/docusaurus/src/theme/SearchBar/index.js
+++ b/docusaurus/src/theme/SearchBar/index.js
@@ -22,12 +22,12 @@ function SearchBarContent() {
       if (!kapaContainer || !kapaContainer.shadowRoot) {
         return;
       }
-
+      
       const shadowActiveElement = kapaContainer.shadowRoot.activeElement;
       
-      if (shadowActiveElement && 
-          (shadowActiveElement.tagName === 'INPUT' || 
-           shadowActiveElement.tagName === 'TEXTAREA' || 
+      if (shadowActiveElement &&
+          (shadowActiveElement.tagName === 'INPUT' ||
+           shadowActiveElement.tagName === 'TEXTAREA' ||
            shadowActiveElement.isContentEditable)) {
         
         const allowedKeys = ['Enter', 'Tab', 'Escape', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
@@ -151,6 +151,7 @@ function SearchBarContent() {
 
     return () => {
       document.removeEventListener('keydown', handleKeyDown, true);
+      
       if (searchInstanceRef.current) {
         searchInstanceRef.current.destroy?.();
         searchInstanceRef.current = null;
@@ -165,9 +166,19 @@ function SearchBarContent() {
   );
 }
 
+function SearchBarFallback() {
+  return (
+    <div className="navbar__search">
+      <button type="button" className="docsearch-btn" aria-label="Search" disabled>
+        <span className="docsearch-btn-placeholder">Search</span>
+      </button>
+    </div>
+  );
+}
+
 export default function SearchBar() {
   return (
-    <BrowserOnly fallback={<div className="navbar__search"><div></div></div>}>
+    <BrowserOnly fallback={<SearchBarFallback />}>
       {() => <SearchBarContent />}
     </BrowserOnly>
   );

From 3dca2592c5a3949227da6f8562c7903e9bdbd2f1 Mon Sep 17 00:00:00 2001
From: Pierre Wizla <4233866+pwizla@users.noreply.github.com>
Date: Mon, 17 Nov 2025 15:27:57 +0100
Subject: [PATCH 2/3] Add JS example version

---
 .../docs/cms/configurations/admin-panel.md    | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/docusaurus/docs/cms/configurations/admin-panel.md b/docusaurus/docs/cms/configurations/admin-panel.md
index c87456800f..526cf9a9b5 100644
--- a/docusaurus/docs/cms/configurations/admin-panel.md
+++ b/docusaurus/docs/cms/configurations/admin-panel.md
@@ -130,6 +130,26 @@ During development Strapi builds a base Vite configuration, then tries to load a
 
 Create `./src/admin/vite.config.ts` (or `.js`) if it does not already exist and extend the dev-server configuration. The following example snippet adds 2 custom domains while keeping the rest of Strapi's defaults untouched:
 
+<Tabs groupId="js-ts">
+
+<TabItem label="JavaScript" value="js">
+
+```js title="src/admin/vite.config.js"
+import { mergeConfig } from 'vite';
+
+export default (config) => {
+  return mergeConfig(config, {
+    server: {
+      allowedHosts: ['preview.my-app.test', '.example-proxy.internal'],
+    },
+  });
+};
+```
+
+</TabItem>
+
+<TabItem label="TypeScript" value="ts">
+
 ```ts title="src/admin/vite.config.ts"
 import { mergeConfig, type UserConfig } from 'vite';
 
@@ -142,6 +162,9 @@ export default (config: UserConfig) => {
 };
 ```
 
+</TabItem>
+</Tabs>
+
 A few tips while configuring `allowedHosts`:
 
 - Pass a string array or `'all'`, matching Vite's accepted shapes.

From 60057231e99dd30e49bcb38d2cb666cd2d041f08 Mon Sep 17 00:00:00 2001
From: Pierre Wizla <4233866+pwizla@users.noreply.github.com>
Date: Mon, 17 Nov 2025 15:34:47 +0100
Subject: [PATCH 3/3] Revert unintended changes

---
 .../SideBySideContainer.jsx                   | 18 ++++++++++++++--
 docusaurus/src/scss/_base.scss                | 12 +++++------
 docusaurus/src/theme/SearchBar/index.js       | 21 +++++--------------
 3 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/docusaurus/src/components/SideBySide/SideBySideContainer/SideBySideContainer.jsx b/docusaurus/src/components/SideBySide/SideBySideContainer/SideBySideContainer.jsx
index 17bc073d97..467fe21b1b 100644
--- a/docusaurus/src/components/SideBySide/SideBySideContainer/SideBySideContainer.jsx
+++ b/docusaurus/src/components/SideBySide/SideBySideContainer/SideBySideContainer.jsx
@@ -5,22 +5,36 @@ import styles from './side-by-side-container.module.scss';
 export function SideBySideContainer({ className, spaced = true, ...rest }) {
   return (
     <>
+      {/* Styles to increase the page-content width */}
       <style
         id="side-by-side-container--styles-overrides"
         dangerouslySetInnerHTML={{
           __html: `
+            /**
+             * Overrides applied by the component 'SideBySideContainer'
+             */
             @media (min-width: 997px) {
+
+              /**
+               * Increase the general container size
+               */
               main article:first-child:not(.col),
               main article:first-child:not(.col) + nav {
-                max-width: 1200px !important;
+                --custom-main-width: 120rem;
               }
             }
 
             @media (max-width: 1536px) {
+              /**
+               * Hide the right-side nav (table of contents)
+               */
               .container > .row > .col.col--3 {
                 display: none;
               }
 
+              /**
+               * Increase the content-column size
+               */
               .container > .row > .col:first-child {
                 max-width: 100% !important;
               }
@@ -39,4 +53,4 @@ export function SideBySideContainer({ className, spaced = true, ...rest }) {
       />
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/docusaurus/src/scss/_base.scss b/docusaurus/src/scss/_base.scss
index 4c928697b1..2b9f09b605 100644
--- a/docusaurus/src/scss/_base.scss
+++ b/docusaurus/src/scss/_base.scss
@@ -13,14 +13,14 @@
   color: var(--custom-selection-color, var(--strapi-neutral-0));
 }
 
-html body main {
+main {
   article:first-child:not(.col):not(.custom-doc-card),
   article:first-child:not(.col) + nav {
-    max-width: 608px !important;
+    max-width: 608px;
     padding-left: 0 !important;
     padding-right: 0 !important;
-    margin-left: auto !important;
-    margin-right: auto !important;
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
@@ -51,10 +51,10 @@ html body main {
 
 /** Responsive */
 @include medium-up {
-  html body main {
+  main {
     article:first-child:not(.col),
     article:first-child:not(.col) + nav {
-      max-width: 672px !important;
+      max-width: 672px;
       padding-left: 32px !important;
       padding-right: 32px !important;
     }
diff --git a/docusaurus/src/theme/SearchBar/index.js b/docusaurus/src/theme/SearchBar/index.js
index 83c3f75324..0929206a4b 100644
--- a/docusaurus/src/theme/SearchBar/index.js
+++ b/docusaurus/src/theme/SearchBar/index.js
@@ -22,12 +22,12 @@ function SearchBarContent() {
       if (!kapaContainer || !kapaContainer.shadowRoot) {
         return;
       }
-      
+
       const shadowActiveElement = kapaContainer.shadowRoot.activeElement;
       
-      if (shadowActiveElement &&
-          (shadowActiveElement.tagName === 'INPUT' ||
-           shadowActiveElement.tagName === 'TEXTAREA' ||
+      if (shadowActiveElement && 
+          (shadowActiveElement.tagName === 'INPUT' || 
+           shadowActiveElement.tagName === 'TEXTAREA' || 
            shadowActiveElement.isContentEditable)) {
         
         const allowedKeys = ['Enter', 'Tab', 'Escape', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
@@ -151,7 +151,6 @@ function SearchBarContent() {
 
     return () => {
       document.removeEventListener('keydown', handleKeyDown, true);
-      
       if (searchInstanceRef.current) {
         searchInstanceRef.current.destroy?.();
         searchInstanceRef.current = null;
@@ -166,19 +165,9 @@ function SearchBarContent() {
   );
 }
 
-function SearchBarFallback() {
-  return (
-    <div className="navbar__search">
-      <button type="button" className="docsearch-btn" aria-label="Search" disabled>
-        <span className="docsearch-btn-placeholder">Search</span>
-      </button>
-    </div>
-  );
-}
-
 export default function SearchBar() {
   return (
-    <BrowserOnly fallback={<SearchBarFallback />}>
+    <BrowserOnly fallback={<div className="navbar__search"><div></div></div>}>
       {() => <SearchBarContent />}
     </BrowserOnly>
   );