From e1f12e6cb7ec5d2bfc430c15319d14c6d87a2c70 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Wed, 31 Jan 2024 09:55:23 -0800
Subject: [PATCH] fix(style): search preview consistency

---
 quartz/components/scripts/search.inline.ts |  4 ++--
 quartz/components/styles/search.scss       | 18 ++++++++++++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 0124e1f1d..5f2da36ee 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -20,8 +20,8 @@ type SearchType = "basic" | "tags"
 let searchType: SearchType = "basic"
 
 const contextWindowWords = 30
-const numSearchResults = 5
-const numTagResults = 3
+const numSearchResults = 8
+const numTagResults = 5
 function highlight(searchTerm: string, text: string, trim?: boolean) {
   // try to highlight longest tokens first
   const tokenizedTerms = searchTerm
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 53046189b..fb7dd7458 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -91,12 +91,22 @@
         flex-direction: row;
         justify-content: space-between;
         opacity: 0;
+        border: 1px solid var(--lightgray);
 
-        & > * {
+        & > div {
           height: calc(75vh - 20em);
           background: none;
-          border-radius: 5px;
-          border: 1px solid var(--lightgray); // Border to define the box
+
+          &:first-child {
+            border-top-left-radius: 5px;
+            border-bottom-left-radius: 5px;
+            border-right: 1px solid var(--lightgray);
+          }
+
+          &:last-child {
+            border-top-right-radius: 5px;
+            border-bottom-right-radius: 5px;
+          }
         }
 
         @media all and (max-width: $mobileBreakpoint) {
@@ -122,7 +132,6 @@
             box-sizing: border-box;
             overflow-y: auto;
             font-family: inherit;
-            font-size: 1.1em;
             color: var(--dark);
             line-height: 1.5em;
             font-weight: 400;
@@ -141,6 +150,7 @@
             padding: 1em;
             cursor: pointer;
             transition: background 0.2s ease;
+            border-bottom: 1px solid var(--lightgray);
             width: 100%;
             display: block;
             box-sizing: border-box;