Fix small RTL layout bug in Search component

withastro · May 25, 2023 · 116c4f5 · 116c4f5
1 parent 8688778
commit 116c4f5
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/sour-beans-cry.md b/.changeset/sour-beans-cry.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Fix minor dev layout bug in Search modal for RTL languages
diff --git a/packages/starlight/components/Search.astro b/packages/starlight/components/Search.astro
@@ -34,7 +34,7 @@ const t = useTranslations(Astro.props.locale);
       </button>
       {
         import.meta.env.DEV ? (
-          <div style="margin: auto; text-align: center;">
+          <div style="margin: auto; text-align: center;" dir="ltr">
             <p>Search is only available in production builds.</p>
             <p>Try building and previewing the site to test it out locally.</p>
           </div>
@@ -63,7 +63,11 @@ const t = useTranslations(Astro.props.locale);
 
       /** Close the modal if a user clicks outside of the modal. */
       const onWindowClick = (event: MouseEvent) => {
-        if (document.body.contains(event.target as Node) && !dialogFrame.contains(event.target as Node)) closeModal();
+        if (
+          document.body.contains(event.target as Node) &&
+          !dialogFrame.contains(event.target as Node)
+        )
+          closeModal();
       };
 
       const openModal = (event?: MouseEvent) => {