align

Author: ArthurFlag

layouts/partials/header.html

@@ -46,7 +46,7 @@
       </nav>
     </div>
     <div id="buttons" class="flex min-w-0 items-center justify-end gap-4 flex-shrink-0">
-      <div class="topbar-button">
+      <div class="topbar-button" id="search-bar-container">
          {{ partialCached "search-bar.html" "-" }}
       </div>
       <button

layouts/partials/search-bar.html

@@ -44,21 +44,24 @@
         </span>
   </div>
   <div
+    id="search-bar-dropdown"
     x-show="open"
     x-cloak
     x-ref="dropdown"
     x-init="$nextTick(() => {
       if (open) {
+        const containerRect = document.getElementById('search-bar-container').getBoundingClientRect();
         const rect = $refs.searchBarRef.getBoundingClientRect();
         $el.style.top = (rect.bottom + window.scrollY + 9) + 'px';
-        $el.style.left = (rect.right - Math.max(rect.width, 400)) + 'px';
+        $el.style.left = (containerRect.right - Math.max(rect.width, 400)) + 'px';
         $el.style.width = Math.max(rect.width, 400) + 'px';
       }
     })"
     x-effect="if (open) {
+      const containerRect = document.getElementById('search-bar-container').getBoundingClientRect();
       const rect = $refs.searchBarRef.getBoundingClientRect();
       $el.style.top = (rect.bottom + window.scrollY + 9) + 'px';
-      $el.style.left = (rect.right - Math.max(rect.width, 400)) + 'px';
+      $el.style.left = (containerRect.right - Math.max(rect.width, 400)) + 'px';
       $el.style.width = Math.max(rect.width, 400) + 'px';
     }"
     class="bg-background-light dark:bg-background-dark fixed z-[999] max-w-xl rounded-sm px-6 py-4 shadow-lg"