From 7accda468c40a1f0d328c2223b1a73ab4a19c5d8 Mon Sep 17 00:00:00 2001
From: holybasil <holybasil.1128@gmail.com>
Date: Thu, 23 Nov 2023 13:50:06 +0800
Subject: [PATCH] fix: positon on mobile

---
 src/components/Header/Header.astro             | 16 +++++++++++++---
 src/components/Header/Search/Search.module.css |  3 ++-
 src/components/Header/Search/Search.tsx        |  6 ++++++
 src/components/Header/ThemeModeToggle.tsx      |  3 ++-
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro
index 24fdbffb7..430a70354 100644
--- a/src/components/Header/Header.astro
+++ b/src/components/Header/Header.astro
@@ -76,7 +76,7 @@ const section = frontmatter?.section ?? ""
             </div>
           )
         }
-        <!-- <ThemeModeToggle client:only="preact" dark={dark} /> -->
+        <ThemeModeToggle client:only="preact" dark={dark} />
         <LanguageSelector class="language-selector" />
         <a href="https://github.com/scroll-tech/scroll-documentation" class="github-url" target="_blank" rel="nofollow">
           <span
@@ -176,9 +176,8 @@ const section = frontmatter?.section ?? ""
   .tools {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 20px;
     width: 100%;
-    justify-content: space-between;
     flex-direction: row-reverse;
   }
 
@@ -218,9 +217,20 @@ const section = frontmatter?.section ?? ""
       font-weight: 600;
       @apply border-0 border-solid border-link;
     }
+
+    .right-box {
+      gap: 1.5em;
+    }
     .tools {
       width: unset;
       flex-direction: row;
+      flex: 1;
+      gap: 8px;
+      justify-content: flex-end;
+    }
+    .search-item {
+      flex: 1;
+      max-width: 346px;
     }
     .github-url {
       width: 35px;
diff --git a/src/components/Header/Search/Search.module.css b/src/components/Header/Search/Search.module.css
index a1beb88cd..e086d239a 100644
--- a/src/components/Header/Search/Search.module.css
+++ b/src/components/Header/Search/Search.module.css
@@ -38,7 +38,7 @@
   outline: 0;
   cursor: pointer;
   align-items: center;
-  width: 346px;
+  width: 100%;
   height: 35px;
   border-radius: 40px;
   font-style: italic;
@@ -198,6 +198,7 @@
 
   .container {
     position: relative;
+    width: 100%;
   }
 
   #searchModal.mini {
diff --git a/src/components/Header/Search/Search.tsx b/src/components/Header/Search/Search.tsx
index d5aeb0008..9f7af0010 100644
--- a/src/components/Header/Search/Search.tsx
+++ b/src/components/Header/Search/Search.tsx
@@ -16,8 +16,14 @@ export default function Search() {
     const body = document.body
     if (isOpen) {
       body.classList.add("global-search-toggle")
+      if (window.matchMedia("(max-width: 50em)").matches) {
+        document.querySelector("#themeModeToggle").style.right = "-43px"
+      }
     } else {
       body.classList.remove("global-search-toggle")
+      if (window.matchMedia("(max-width: 50em)").matches) {
+        document.querySelector("#themeModeToggle").style.right = 0
+      }
     }
   }, [isOpen])
 
diff --git a/src/components/Header/ThemeModeToggle.tsx b/src/components/Header/ThemeModeToggle.tsx
index e5cc0753c..5dab23c86 100644
--- a/src/components/Header/ThemeModeToggle.tsx
+++ b/src/components/Header/ThemeModeToggle.tsx
@@ -43,8 +43,9 @@ const ThemeModeToggle = (props) => {
 
   return (
     <button
+      id="themeModeToggle"
       className={clsx(
-        "w-[35px] h-[35px] rounded-[5px] border-solid bg-transparent border border-black dark:border-white text-black dark:text-white",
+        "relative w-[35px] h-[35px] rounded-[5px] border-solid bg-transparent border border-black dark:border-white text-black dark:text-white",
         dark && "border-white text-white"
       )}
       onClick={handleToggleThemeMode}