From ad6a1c8c84d731bd7ded72b3cf066901f2183039 Mon Sep 17 00:00:00 2001
From: Daniel O'Connell <github@ahiru.pl>
Date: Sat, 8 Jun 2024 10:29:06 +0200
Subject: [PATCH] resolve conflicts

---
 app/components/Article/Contents.tsx       |  2 +-
 app/components/Article/article.css        |  7 ++++---
 app/components/Button/button.css          |  1 +
 app/components/SearchResults/Dropdown.tsx | 10 ++++++++--
 app/components/search.tsx                 |  1 +
 5 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/components/Article/Contents.tsx b/app/components/Article/Contents.tsx
index 33ca943e..c0ae2d26 100644
--- a/app/components/Article/Contents.tsx
+++ b/app/components/Article/Contents.tsx
@@ -25,7 +25,7 @@ const addPopup = (e: HTMLElement, id: string, contents: string, mobile?: boolean
   if (preexisting) return preexisting
 
   const popup = document.createElement('div')
-    popup.className = 'link-popup bordered small background'
+  popup.className = 'link-popup bordered small background'
   popup.innerHTML = contents
   popup.id = id
 
diff --git a/app/components/Article/article.css b/app/components/Article/article.css
index 6465bbc9..2163894d 100644
--- a/app/components/Article/article.css
+++ b/app/components/Article/article.css
@@ -102,10 +102,7 @@ article .glossary-entry {
 
 article .link-popup {
   visibility: hidden;
-  opacity: 0;
   z-index: 4;
-  position: absolute;
-  top: 0;
   width: 512px;
 }
 
@@ -218,6 +215,10 @@ article .banner h3 .title {
     flex-direction: row;
     flex-wrap: wrap;
   }
+
+  article .link-popup {
+    width: 100%;
+  }
   article .footer-comtainer > div:nth-child(-n + 2) {
     flex: 1 1;
   }
diff --git a/app/components/Button/button.css b/app/components/Button/button.css
index b44d9267..0f4a5060 100644
--- a/app/components/Button/button.css
+++ b/app/components/Button/button.css
@@ -183,6 +183,7 @@
 /* #### Composite button #### */
 .composite-button {
   cursor: pointer;
+  display: flex;
 }
 
 .composite-button > form .button,
diff --git a/app/components/SearchResults/Dropdown.tsx b/app/components/SearchResults/Dropdown.tsx
index 0de0bd1f..3ab2bc48 100644
--- a/app/components/SearchResults/Dropdown.tsx
+++ b/app/components/SearchResults/Dropdown.tsx
@@ -22,7 +22,13 @@ export interface SearchResultsProps {
   url: string
 }
 
-export const SearchResults = ({results}: {results: SearchResultsProps[]}) => {
+export const SearchResults = ({
+  results,
+  onSelect,
+}: {
+  results: SearchResultsProps[]
+  onSelect?: () => void
+}) => {
   const isMobile = useIsMobile()
   const noResults = results.length === 0
   if (noResults) {
@@ -34,7 +40,7 @@ export const SearchResults = ({results}: {results: SearchResultsProps[]}) => {
   }
 
   return (
-    <div className="container-search-results bordered col-5">
+    <div className="container-search-results bordered col-5" onClick={onSelect}>
       {results.map((result, i) => (
         <Link key={i} className="search-result" to={result.url}>
           <Paper />
diff --git a/app/components/search.tsx b/app/components/search.tsx
index f409962a..8a795612 100644
--- a/app/components/search.tsx
+++ b/app/components/search.tsx
@@ -42,6 +42,7 @@ export default function Search({limitFromUrl, className}: Props) {
       )}
       {!isPendingSearch && searchPhrase && showResults && (
         <SearchResults
+          onSelect={() => setShowResults(false)}
           results={results.map((r) => ({
             title: r.title,
             url: questionUrl(r),