From db792a5a35914f6405e8b0c97ce0a5f077ab048f Mon Sep 17 00:00:00 2001
From: viktorstrate <viktorstrate@gmail.com>
Date: Thu, 10 Jun 2021 21:40:48 +0200
Subject: [PATCH] Desktop styling for search bar

---
 ui/src/App.tsx                         | 11 ++++++++++-
 ui/src/components/header/Searchbar.tsx | 17 ++++++++++-------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 3e4d77ad..170a68b9 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -1,14 +1,23 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Helmet } from 'react-helmet'
 import Routes from './components/routes/Routes'
 import Messages from './components/messages/Messages'
 import { useTranslation } from 'react-i18next'
 import { loadTranslations } from './localization'
+import { useLocation } from 'react-router'
 
 const App = () => {
   const { t } = useTranslation()
+  const { pathname } = useLocation()
+
   loadTranslations()
 
+  useEffect(() => {
+    window.scrollTo(0, 0)
+    if (document.activeElement != document.body)
+      (document.activeElement as HTMLInputElement).blur()
+  }, [pathname])
+
   return (
     <>
       <Helmet>
diff --git a/ui/src/components/header/Searchbar.tsx b/ui/src/components/header/Searchbar.tsx
index d86e4bf6..7536236e 100644
--- a/ui/src/components/header/Searchbar.tsx
+++ b/ui/src/components/header/Searchbar.tsx
@@ -39,7 +39,9 @@ const SEARCH_QUERY = gql`
   }
 `
 
-const SearchWrapper = styled.div.attrs({ className: 'w-full max-w-xs' })``
+const SearchWrapper = styled.div.attrs({
+  className: 'w-full max-w-xs lg:relative',
+})``
 
 const SearchBar = () => {
   const { t } = useTranslation()
@@ -173,7 +175,7 @@ const SearchBar = () => {
           selectedItemId ? `search-item-${selectedItemId}` : ''
         }
         aria-expanded={expanded}
-        className="w-full py-2 px-3 rounded-md bg-gray-50 focus:bg-white border border-gray-50 focus:border-blue-400 outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50"
+        className="w-full py-2 px-3 z-10 relative rounded-md bg-gray-50 focus:bg-white border border-gray-50 focus:border-blue-400 outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50"
         type="search"
         placeholder={t('header.search.placeholder', 'Search')}
         onChange={fetchEvent}
@@ -185,7 +187,7 @@ const SearchBar = () => {
 }
 
 const ResultTitle = styled.h1.attrs({
-  className: 'uppercase text-gray-700 font-semibold mt-4 mb-2 mx-1',
+  className: 'uppercase text-gray-700 text-sm font-semibold mt-4 mb-2 mx-1',
 })``
 
 type SearchResultsProps = {
@@ -241,7 +243,8 @@ const SearchResults = ({
       id="search-results"
       role="listbox"
       className={classNames(
-        'absolute bg-white left-0 right-0 top-[72px] overflow-y-auto h-[calc(100vh-152px)] border px-4',
+        'absolute bg-white left-0 right-0 top-[72px] overflow-y-auto h-[calc(100vh-152px)] border px-4 z-0',
+        'lg:top-[40px] lg:shadow-md lg:rounded-b lg:max-h-[560px]',
         { hidden: !expanded }
       )}
       tabIndex={-1}
@@ -324,7 +327,7 @@ const SearchRow = ({
     >
       <NavLink to={link} className="flex items-center" tabIndex={-1}>
         {preview}
-        <span className="flex-grow pl-2">{label}</span>
+        <span className="flex-grow pl-2 text-sm">{label}</span>
       </NavLink>
     </li>
   )
@@ -345,7 +348,7 @@ const PhotoRow = ({ query, media, selected, setSelected }: PhotoRowArgs) => (
     preview={
       <ProtectedImage
         src={media?.thumbnail?.url}
-        className="w-16 h-16 object-cover"
+        className="w-14 h-14 object-cover"
       />
     }
     label={searchHighlighted(query, media.title)}
@@ -369,7 +372,7 @@ const AlbumRow = ({ query, album, selected, setSelected }: AlbumRowArgs) => (
     preview={
       <ProtectedImage
         src={album?.thumbnail?.thumbnail?.url}
-        className="w-16 h-16 rounded object-cover"
+        className="w-14 h-14 rounded object-cover"
       />
     }
     label={searchHighlighted(query, album.title)}