fix search and list to work with overflow scrolling

client/src/routes/main.tsx

@@ -32,8 +32,8 @@ function Home() {
         <main >
             <nav>
                 <div class='header'>
-                    <span>record</span>
-                    <span>offers</span>
+                    <span>Record</span>
+                    <span>Offers</span>
                 </div>
                 {wants.map(GroupNav)}
             </nav>

client/src/routes/search.tsx

@@ -68,7 +68,8 @@ const User = () => {
         setInfoText(`Added ${wants.length} items to your list.`);
     }
 
-    const searchRef = useRef<HTMLInputElement>()
+    const searchRef = useRef<HTMLInputElement>();
+    const resultsRef = useRef<HTMLDivElement>();
 
     useEffect(() => {
         searchRef.current.focus()
@@ -85,7 +86,7 @@ const User = () => {
     }
 
     const topEl = results.length
-        ? <button onClick={() => window.scrollTo(0, 0)}> top </button>
+        ? <button onClick={() => resultsRef.current.scrollTo(0, 0)}> top </button>
         : null;
 
     const infoEl = infoText
@@ -111,7 +112,7 @@ const User = () => {
                 <hr />
                 <p>Data provided by Discogs.</p>
             </div>
-            <div class='results'>
+            <div class='results' ref={resultsRef}>
                 {infoEl}
                 {results.map(r => Result(r, wants))}
                 {topEl}

client/src/style/styles.less

@@ -4,7 +4,7 @@ body {
 }
 
 #mcrates {
-    padding: 0 var(--spacing-double) 0 var(--spacing-double);
+    padding: 0 var(--spacing-double) var(--spacing) var(--spacing-double);
     display: grid;
 
     grid-template-areas:
@@ -87,6 +87,8 @@ article {
     display: grid;
     grid-template-columns: 1fr 2fr;
 
+    overflow: hidden;
+
     .results {
         display: grid;
         padding-left: var(--spacing);
@@ -97,6 +99,8 @@ article {
             padding: var(--spacing);
             grid-template-columns: 1fr 4fr min-content;
         }
+
+        overflow: scroll;
     }
 
     button {
@@ -117,6 +121,7 @@ article {
         1fr 1fr 1fr;
 
     grid-gap: var(--spacing);
+    overflow: scroll;
 
     article {
         display: grid;