Update SearchModal to use new scroll tech

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<

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;
 

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"