From 66df6f9f7416275f3e861aad98f769ad9d168352 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 21 Jan 2023 07:09:41 -0800
Subject: [PATCH] Update SearchModal to use new scroll tech

---
 components/DialogContent/index.tsx |  2 +-
 components/SearchModal/index.scss  | 18 +++++++-----------
 components/SearchModal/index.tsx   |  9 ++++++---
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/components/DialogContent/index.tsx b/components/DialogContent/index.tsx
index e5337c56..d2aabd2c 100644
--- a/components/DialogContent/index.tsx
+++ b/components/DialogContent/index.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import classNames from 'classnames'
+import debounce from 'lodash.debounce'
 
 import Overlay from '~components/Overlay'
 import './index.scss'
-import debounce from 'lodash.debounce'
 
 interface Props
   extends React.DetailedHTMLProps<
diff --git a/components/SearchModal/index.scss b/components/SearchModal/index.scss
index 94eaa0b9..f507f592 100644
--- a/components/SearchModal/index.scss
+++ b/components/SearchModal/index.scss
@@ -3,8 +3,6 @@
   display: flex;
   flex-direction: column;
   min-height: 430px;
-  height: 480px;
-  gap: 0;
   padding: 0;
 
   @include breakpoint(phone) {
@@ -14,17 +12,16 @@
     min-height: 100vh;
   }
 
-  #Header {
-    border-bottom: 1px solid transparent;
+  .DialogHeader.Search {
+    align-items: inherit;
     display: flex;
     flex-direction: column;
     gap: $unit;
-    padding-bottom: $unit * 2;
-
-    &.scrolled {
-      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-      box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
-    }
+    padding: 0;
+    padding-bottom: $unit-2x;
+    position: sticky;
+    top: 0;
+    left: 0;
 
     #Bar {
       align-items: center;
@@ -63,7 +60,6 @@
 
   #Results {
     margin: 0;
-    max-height: 356px;
     padding: 0 ($unit * 1.5);
     overflow-y: scroll;
 
diff --git a/components/SearchModal/index.tsx b/components/SearchModal/index.tsx
index c478c988..e0fa32e9 100644
--- a/components/SearchModal/index.tsx
+++ b/components/SearchModal/index.tsx
@@ -42,8 +42,10 @@ const SearchModal = (props: Props) => {
   // Set up translation
   const { t } = useTranslation('common')
 
-  let searchInput = React.createRef<HTMLInputElement>()
-  let scrollContainer = React.createRef<HTMLDivElement>()
+  // Refs
+  const headerRef = React.createRef<HTMLDivElement>()
+  const searchInput = React.createRef<HTMLInputElement>()
+  const scrollContainer = React.createRef<HTMLDivElement>()
 
   const [firstLoad, setFirstLoad] = useState(true)
   const [filters, setFilters] = useState<{ [key: string]: any }>()
@@ -356,10 +358,11 @@ const SearchModal = (props: Props) => {
       <DialogTrigger asChild>{props.children}</DialogTrigger>
       <DialogContent
         className="Search"
+        headerref={headerRef}
         onEscapeKeyDown={onEscapeKeyDown}
         onOpenAutoFocus={onOpenAutoFocus}
       >
-        <div id="Header">
+        <div className="Search DialogHeader" ref={headerRef}>
           <div id="Bar">
             <Input
               autoComplete="off"