From a5df4b74da0d535f0f77248edda24b0e84e49ce9 Mon Sep 17 00:00:00 2001
From: Shaung Bhone <phonelaayy@gmail.com>
Date: Mon, 16 Jun 2025 21:33:43 +0700
Subject: [PATCH 1/3] Fix z-index issue in search modal and clean up template
 structure

---
 resources/views/_partials/_search.blade.php | 49 ++++++++++-----------
 1 file changed, 24 insertions(+), 25 deletions(-)

diff --git a/resources/views/_partials/_search.blade.php b/resources/views/_partials/_search.blade.php
index 92a5962c5..f5afa1b32 100644
--- a/resources/views/_partials/_search.blade.php
+++ b/resources/views/_partials/_search.blade.php
@@ -1,6 +1,6 @@
 <div x-data="searchConfig()" x-init="$watch('searchVisible', value => toggle())" x-show="searchVisible" x-cloak
     class="fixed inset-0 z-50 overflow-y-auto p-4 sm:p-6 md:p-20" role="dialog" aria-modal="true">
-    <div class="fixed inset-0 bg-gray-700 bg-opacity-50 transition-opacity" aria-hidden="true"></div>
+    <div class="fixed inset-0 bg-gray-700 bg-opacity-50 transition-opacity -z-10" aria-hidden="true"></div>
 
     <div @click.outside="searchVisible = false"
         class="mx-auto max-w-xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
@@ -36,8 +36,7 @@ class="border-t border-gray-100 py-14 px-6 text-center text-sm sm:px-14">
             x-show="searchQuery.length && (threads.total || articles.total || users.total)"
             x-data="tabConfig()"
             x-init="$watch('activeTab', value => setActiveTab(value))"
-            x-cloak
-        >
+            x-cloak>
             <ul class="grid grid-flow-col text-center text-gray-500 bg-gray-100 rounded-lg p-1">
                 <li>
                     <a href="javascript:void(0)" @click="activeTab = 'threads'" class="flex justify-center py-4" :class="currentTab('threads')">
@@ -61,33 +60,33 @@ class="border-t border-gray-100 py-14 px-6 text-center text-sm sm:px-14">
             <ul>
                 <li x-show="activeTab === 'threads'" class="mt-2 text-sm text-gray-800">
                     <template x-for="thread in threads.threads">
-                        <li class="cursor-default select-none px-4 py-2 hover:bg-lio-100" :id="`option-${thread.id}`" role="option" tabindex="-1">
-                            <a :href="'/forum/'+thread.slug" class="flex flex-col">
-                                <span class="text-black-900 font-medium break-all" x-html="thread._highlightResult.subject.value"></span>
-                                <span class="text-black-900 break-all" x-html="thread._snippetResult.body.value"></span>
-                            </a>
-                        </li>
-                    </template>
+                <li class="cursor-default select-none px-4 py-2 hover:bg-lio-100" :id="`option-${thread.id}`" role="option" tabindex="-1">
+                    <a :href="'/forum/'+thread.slug" class="flex flex-col">
+                        <span class="text-black-900 font-medium break-all" x-html="thread._highlightResult.subject.value"></span>
+                        <span class="text-black-900 break-all" x-html="thread._snippetResult.body.value"></span>
+                    </a>
+                </li>
+                </template>
                 </li>
                 <li x-show="activeTab === 'articles'" class="mt-2 text-sm text-gray-800">
                     <template x-for="article in articles.articles">
-                        <li class="cursor-default select-none px-4 py-2 hover:bg-lio-100" :id="`option-${article.id}`" role="option" tabindex="-1">
-                            <a :href="'/articles/'+article.slug" class="flex flex-col">
-                                <span class="text-black-900 font-medium break-all" x-html="article._highlightResult.title.value"></span>
-                                <span class="text-black-900 break-all" x-html="article._snippetResult.body.value"></span>
-                            </a>
-                        </li>
-                    </template>
+                <li class="cursor-default select-none px-4 py-2 hover:bg-lio-100" :id="`option-${article.id}`" role="option" tabindex="-1">
+                    <a :href="'/articles/'+article.slug" class="flex flex-col">
+                        <span class="text-black-900 font-medium break-all" x-html="article._highlightResult.title.value"></span>
+                        <span class="text-black-900 break-all" x-html="article._snippetResult.body.value"></span>
+                    </a>
+                </li>
+                </template>
                 </li>
                 <li x-show="activeTab === 'users'" class="mt-2 text-sm text-gray-800">
                     <template x-for="user in users.users">
-                        <li class="cursor-default select-none px-4 py-2 hover:bg-lio-100" :id="`option-${user.id}`" role="option" tabindex="-1">
-                            <a :href="'/user/'+user.username" class="flex flex-col">
-                                <span class="text-black-900 font-medium break-all" x-html="user._highlightResult.username.value"></span>
-                                <span class="text-black-900 break-all" x-html="user._highlightResult.name.value"></span>
-                            </a>
-                        </li>
-                    </template>
+                <li class="cursor-default select-none px-4 py-2 hover:bg-lio-100" :id="`option-${user.id}`" role="option" tabindex="-1">
+                    <a :href="'/user/'+user.username" class="flex flex-col">
+                        <span class="text-black-900 font-medium break-all" x-html="user._highlightResult.username.value"></span>
+                        <span class="text-black-900 break-all" x-html="user._highlightResult.name.value"></span>
+                    </a>
+                </li>
+                </template>
                 </li>
             </ul>
         </div>
@@ -109,4 +108,4 @@ class="border-t border-gray-100 py-14 px-6 text-center text-sm sm:px-14">
             </a>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file

From b3903e0ff64f97f250e22f2c163e2929de19d1a0 Mon Sep 17 00:00:00 2001
From: Shaung Bhone <phonelaayy@gmail.com>
Date: Mon, 16 Jun 2025 21:36:44 +0700
Subject: [PATCH 2/3] back to reformat

---
 resources/views/_partials/_search.blade.php | 47 +++++++++++----------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/resources/views/_partials/_search.blade.php b/resources/views/_partials/_search.blade.php
index f5afa1b32..d3e63a5f1 100644
--- a/resources/views/_partials/_search.blade.php
+++ b/resources/views/_partials/_search.blade.php
@@ -36,7 +36,8 @@ class="border-t border-gray-100 py-14 px-6 text-center text-sm sm:px-14">
             x-show="searchQuery.length && (threads.total || articles.total || users.total)"
             x-data="tabConfig()"
             x-init="$watch('activeTab', value => setActiveTab(value))"
-            x-cloak>
+            x-cloak
+        >
             <ul class="grid grid-flow-col text-center text-gray-500 bg-gray-100 rounded-lg p-1">
                 <li>
                     <a href="javascript:void(0)" @click="activeTab = 'threads'" class="flex justify-center py-4" :class="currentTab('threads')">
@@ -60,33 +61,33 @@ class="border-t border-gray-100 py-14 px-6 text-center text-sm sm:px-14">
             <ul>
                 <li x-show="activeTab === 'threads'" class="mt-2 text-sm text-gray-800">
                     <template x-for="thread in threads.threads">
-                <li class="cursor-default select-none px-4 py-2 hover:bg-lio-100" :id="`option-${thread.id}`" role="option" tabindex="-1">
-                    <a :href="'/forum/'+thread.slug" class="flex flex-col">
-                        <span class="text-black-900 font-medium break-all" x-html="thread._highlightResult.subject.value"></span>
-                        <span class="text-black-900 break-all" x-html="thread._snippetResult.body.value"></span>
-                    </a>
-                </li>
-                </template>
+                        <li class="cursor-default select-none px-4 py-2 hover:bg-lio-100" :id="`option-${thread.id}`" role="option" tabindex="-1">
+                            <a :href="'/forum/'+thread.slug" class="flex flex-col">
+                                <span class="text-black-900 font-medium break-all" x-html="thread._highlightResult.subject.value"></span>
+                                <span class="text-black-900 break-all" x-html="thread._snippetResult.body.value"></span>
+                            </a>
+                        </li>
+                    </template>
                 </li>
                 <li x-show="activeTab === 'articles'" class="mt-2 text-sm text-gray-800">
                     <template x-for="article in articles.articles">
-                <li class="cursor-default select-none px-4 py-2 hover:bg-lio-100" :id="`option-${article.id}`" role="option" tabindex="-1">
-                    <a :href="'/articles/'+article.slug" class="flex flex-col">
-                        <span class="text-black-900 font-medium break-all" x-html="article._highlightResult.title.value"></span>
-                        <span class="text-black-900 break-all" x-html="article._snippetResult.body.value"></span>
-                    </a>
-                </li>
-                </template>
+                        <li class="cursor-default select-none px-4 py-2 hover:bg-lio-100" :id="`option-${article.id}`" role="option" tabindex="-1">
+                            <a :href="'/articles/'+article.slug" class="flex flex-col">
+                                <span class="text-black-900 font-medium break-all" x-html="article._highlightResult.title.value"></span>
+                                <span class="text-black-900 break-all" x-html="article._snippetResult.body.value"></span>
+                            </a>
+                        </li>
+                    </template>
                 </li>
                 <li x-show="activeTab === 'users'" class="mt-2 text-sm text-gray-800">
                     <template x-for="user in users.users">
-                <li class="cursor-default select-none px-4 py-2 hover:bg-lio-100" :id="`option-${user.id}`" role="option" tabindex="-1">
-                    <a :href="'/user/'+user.username" class="flex flex-col">
-                        <span class="text-black-900 font-medium break-all" x-html="user._highlightResult.username.value"></span>
-                        <span class="text-black-900 break-all" x-html="user._highlightResult.name.value"></span>
-                    </a>
-                </li>
-                </template>
+                        <li class="cursor-default select-none px-4 py-2 hover:bg-lio-100" :id="`option-${user.id}`" role="option" tabindex="-1">
+                            <a :href="'/user/'+user.username" class="flex flex-col">
+                                <span class="text-black-900 font-medium break-all" x-html="user._highlightResult.username.value"></span>
+                                <span class="text-black-900 break-all" x-html="user._highlightResult.name.value"></span>
+                            </a>
+                        </li>
+                    </template>
                 </li>
             </ul>
         </div>
@@ -108,4 +109,4 @@ class="border-t border-gray-100 py-14 px-6 text-center text-sm sm:px-14">
             </a>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>

From 6300f24ce62e1956388c2e26758d3d274b86faa8 Mon Sep 17 00:00:00 2001
From: Dries Vints <dries@vints.be>
Date: Mon, 16 Jun 2025 21:01:33 +0200
Subject: [PATCH 3/3] wip

---
 resources/views/_partials/_search.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/_partials/_search.blade.php b/resources/views/_partials/_search.blade.php
index d3e63a5f1..61b110406 100644
--- a/resources/views/_partials/_search.blade.php
+++ b/resources/views/_partials/_search.blade.php
@@ -1,6 +1,6 @@
 <div x-data="searchConfig()" x-init="$watch('searchVisible', value => toggle())" x-show="searchVisible" x-cloak
     class="fixed inset-0 z-50 overflow-y-auto p-4 sm:p-6 md:p-20" role="dialog" aria-modal="true">
-    <div class="fixed inset-0 bg-gray-700 bg-opacity-50 transition-opacity -z-10" aria-hidden="true"></div>
+    <div class="fixed inset-0 bg-gray-700 opacity-50 transition-opacity -z-10" aria-hidden="true"></div>
 
     <div @click.outside="searchVisible = false"
         class="mx-auto max-w-xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">