fix: positon on mobile

scroll-tech · Nov 23, 2023 · 7accda4 · 7accda4
1 parent aeff86f
commit 7accda4
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}