fix: borders of search results style aligned

scout-ch · Oct 16, 2023 · 0fb6b60 · 0fb6b60
1 parent da82fea
commit 0fb6b60
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/components/SearchForm.tsx b/src/components/SearchForm.tsx
@@ -133,7 +133,7 @@ function SearchForm({ t, sections, minKeyWordLength = 3 }: Props) {
                 if (searchResults.length > 0) {
                     // render results
                     return searchResults.map(result => {
-                        return <div key={result.id} className='search-result'>
+                        return <div key={result.id} className='search-result border rounded'>
                             <div className='title-match'>
                                 <Link to={`/${result.section.slug}`}> 
                                     {result.section.title}
@@ -149,7 +149,8 @@ function SearchForm({ t, sections, minKeyWordLength = 3 }: Props) {
                                         return <ReactMarkdown key={idx} 
                                             remarkPlugins={[remarkGfm, strip_md, strip_html]} 
                                             components={LinkComponent} 
-                                            children={content} 
+                                            children={content}
+                                            className='border-bottom'
                                         />
                                     })}
                                 </div>

diff --git a/src/styles/search.scss b/src/styles/search.scss
@@ -9,9 +9,6 @@
     flex-direction: column;
     gap: 8px;
 
-    border: 1px solid #ebebeb;
-    border-radius: 6px;
-    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2);
     padding: 10px 12px;
     animation: fadeIn 0.5s;
 
@@ -32,10 +29,12 @@
         }
 
         >:not(:last-child) {
-            border-bottom: 1px solid #ebebeb;
             margin-bottom: 8px;
             padding-bottom: 8px;
         }
+        >:last-child {
+            border-bottom: none !important;
+        }
     }
 }