From 2ccbf05541ebc9b7f1da820ef15c703966b6fafd Mon Sep 17 00:00:00 2001
From: GustaveWPM <jgeorge@perso.be>
Date: Wed, 1 May 2024 16:12:00 +0200
Subject: [PATCH 1/3] chore: minor changes

---
 .../layouts/navbar/search/NavbarSearchButtonInner.tsx        | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/layouts/navbar/search/NavbarSearchButtonInner.tsx b/src/components/layouts/navbar/search/NavbarSearchButtonInner.tsx
index 3e5713f60..2985461a4 100644
--- a/src/components/layouts/navbar/search/NavbarSearchButtonInner.tsx
+++ b/src/components/layouts/navbar/search/NavbarSearchButtonInner.tsx
@@ -283,7 +283,10 @@ const NavbarSearchButtonInner = <AllTabValues extends typeof navbarSearchBtnProp
       >
         {prevScreenBtn}
         <Tabs
-          onValueChange={(v) => updateMemorizedTabValueAndSetTabValue(v as TabValue)}
+          onValueChange={(v) => {
+            computeAndSetResults(searchText, tabValue, setResults);
+            updateMemorizedTabValueAndSetTabValue(v as TabValue);
+          }}
           className="search-menu-gap-y flex w-full flex-col lg:px-5"
           orientation={isLargeScreen ? 'horizontal' : 'vertical'}
           value={tabValue}

From bc3c45a8905829744d256ba9ee19186b1fa09541 Mon Sep 17 00:00:00 2001
From: GustaveWPM <jgeorge@perso.be>
Date: Wed, 1 May 2024 16:31:31 +0200
Subject: [PATCH 2/3] fix: responsive posts previews font size

---
 src/app/pages-layout.css            | 24 ++++++++++++++++++++++++
 src/components/ui/search/Result.tsx |  1 +
 2 files changed, 25 insertions(+)

diff --git a/src/app/pages-layout.css b/src/app/pages-layout.css
index 1a5741ca2..1e84cc427 100644
--- a/src/app/pages-layout.css
+++ b/src/app/pages-layout.css
@@ -64,6 +64,14 @@
   margin-right: max(1vw, 1rem);
 }
 
+.search-menu-result-link {
+  font-size: max(clamp(1.6625vh, 2.0625vw, 1.1875em), 3.75vh);
+}
+
+.search-menu-result-link h3 {
+  font-size: max(clamp(1.82875vh, 2.26875vw, 1.1875em), 4.125vh);
+}
+
 @media only screen and (max-width: 1024px) {
   .search-menu-tabslist-item {
     height: max(4vw, 4vh);
@@ -110,6 +118,14 @@
     font-size: max(clamp(1.45vh, 2.35vw, 1.1875em), max(2.35vh, 2.35vw));
   }
 
+  .search-menu-result-link {
+    font-size: max(clamp(1.45vh, 2.35vw, 1.1875em), max(2.35vh, 2.35vw));
+  }
+
+  .search-menu-result-link h3 {
+    font-size: max(clamp(1.595vh, 2.585vw, 1.1875em), max(2.585vh, 2.585vw));
+  }
+
   .search-menu-tabslist-item {
     font-size: max(clamp(1.45vh, 2.35vw, 1.1875em), max(2.35vh, 2.35vw));
   }
@@ -121,6 +137,14 @@
     padding: clamp(3.90625vh, 5.15625vw, 1.1875em) clamp(1.5625vh, 2.0625vw, 1.1875em);
   }
 
+  .search-menu-result-link {
+    font-size: max(clamp(2.9vh, 4.7vw, 1.1875em, max(4.7vh, 4.7vw)));
+  }
+
+  .search-menu-result-link h3 {
+    font-size: max(clamp(3.19vh, 5.17vw, 1.1875em, max(5.17vh, 5.17vw)));
+  }
+
   .search-menu-tabslist-item {
     font-size: max(clamp(2.9vh, 4.7vw, 1.1875em), max(4.7vh, 4.7vw));
   }
diff --git a/src/components/ui/search/Result.tsx b/src/components/ui/search/Result.tsx
index 1cd705876..979d05d3e 100644
--- a/src/components/ui/search/Result.tsx
+++ b/src/components/ui/search/Result.tsx
@@ -19,6 +19,7 @@ const Result: FunctionComponent<ResultProps> = ({ className, metaTitle, excerpt,
   return (
     <Link
       className={cn(
+        'search-menu-result-link',
         'w-full',
         {
           'pointer-events-none opacity-50': exactMatch

From 429ee9dabe3918503a7e267d301c2ab6c094dcae Mon Sep 17 00:00:00 2001
From: GustaveWPM <jgeorge@perso.be>
Date: Wed, 1 May 2024 17:40:16 +0200
Subject: [PATCH 3/3] chore: having fun

---
 src/app/pages-layout.css                         |  8 ++++++++
 .../navbar/search/NavbarSearchButtonInner.tsx    |  3 ++-
 src/components/ui/search/Result.tsx              | 16 +++++++++++++---
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/app/pages-layout.css b/src/app/pages-layout.css
index 1e84cc427..8c8e15f57 100644
--- a/src/app/pages-layout.css
+++ b/src/app/pages-layout.css
@@ -66,12 +66,20 @@
 
 .search-menu-result-link {
   font-size: max(clamp(1.6625vh, 2.0625vw, 1.1875em), 3.75vh);
+  padding-left: max(0.2vh, 0.2vw);
+  padding-right: max(0.2vh, 0.2vw);
 }
 
 .search-menu-result-link h3 {
   font-size: max(clamp(1.82875vh, 2.26875vw, 1.1875em), 4.125vh);
 }
 
+.search-menu-result-link mark {
+  background-color: hsl(var(--primary));
+  padding: 0 0.2em;
+  color: white;
+}
+
 @media only screen and (max-width: 1024px) {
   .search-menu-tabslist-item {
     height: max(4vw, 4vh);
diff --git a/src/components/layouts/navbar/search/NavbarSearchButtonInner.tsx b/src/components/layouts/navbar/search/NavbarSearchButtonInner.tsx
index 2985461a4..239d9fc8d 100644
--- a/src/components/layouts/navbar/search/NavbarSearchButtonInner.tsx
+++ b/src/components/layouts/navbar/search/NavbarSearchButtonInner.tsx
@@ -314,7 +314,8 @@ const NavbarSearchButtonInner = <AllTabValues extends typeof navbarSearchBtnProp
           </DialogHeader>
           <div
             className={cn('flex-1 rounded-md', {
-              'min-h-0 overflow-y-auto break-words border border-input px-2 [&>*>*]:pb-2 first:[&>*>*]:py-2': results !== null,
+              "min-h-0 overflow-y-auto break-words border border-input px-8 [&>*>*]:mb-8 first:[&>*>*]:my-8 last:[&>*>*]:after:block last:[&>*>*]:after:h-8 last:[&>*>*]:after:content-['']":
+                results !== null,
               "after:block after:h-10 after:content-['']": searchText === SEARCH_TEXT_INITIAL_STATE
             })}
           >
diff --git a/src/components/ui/search/Result.tsx b/src/components/ui/search/Result.tsx
index 979d05d3e..932e61f0c 100644
--- a/src/components/ui/search/Result.tsx
+++ b/src/components/ui/search/Result.tsx
@@ -6,6 +6,8 @@ import { usePathname } from 'next/navigation';
 import { cn } from '@/lib/tailwind';
 import Link from 'next/link';
 
+import { CardContent, CardHeader, CardTitle, Card } from '../Card';
+
 interface ResultProps extends Partial<WithClassname> {
   metaTitle: string;
   excerpt: string;
@@ -20,7 +22,7 @@ const Result: FunctionComponent<ResultProps> = ({ className, metaTitle, excerpt,
     <Link
       className={cn(
         'search-menu-result-link',
-        'w-full',
+        'flex h-full w-full flex-col transition-transform duration-300 hover:delay-0 hover:duration-100 focus:delay-0 focus:duration-100 dark:hover:brightness-125 dark:focus:brightness-125',
         {
           'pointer-events-none opacity-50': exactMatch
         },
@@ -29,8 +31,16 @@ const Result: FunctionComponent<ResultProps> = ({ className, metaTitle, excerpt,
       aria-current={exactMatch ? 'page' : undefined}
       href={href}
     >
-      <h3>{metaTitle}</h3>
-      <p dangerouslySetInnerHTML={{ __html: excerpt }} />
+      <Card className="overflow-hidden rounded shadow-lg transition-[box-shadow] duration-300 hover:shadow-xl focus:shadow-xl">
+        <CardHeader className="pb-2">
+          <CardTitle className="flex justify-between" titleType="h3">
+            {metaTitle}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p dangerouslySetInnerHTML={{ __html: excerpt }} />
+        </CardContent>
+      </Card>
     </Link>
   );
 };