fix(search-box): make search results scrollable

client/src/search.tsx

@@ -178,6 +178,16 @@ function InnerSearchNavigateWidget(props: InnerSearchNavigateWidgetProps) {
   const locale = useLocale();
   const gleanClick = useGleanClick();
 
+  const calculateSearchResultsMaxHeight = () => {
+    const bottom = inputRef?.current?.getBoundingClientRect()?.bottom || 0;
+    const resultsWrapperHeight =
+      typeof window !== "undefined"
+        ? // 14px is the bottom distance between results and the bottom of the window
+          `${window?.innerHeight - bottom - 14}px`
+        : "auto";
+    return { maxHeight: resultsWrapperHeight };
+  };
+
   const [searchIndex, searchIndexError, initializeSearchIndex] =
     useSearchIndex();
 
@@ -187,6 +197,10 @@ function InnerSearchNavigateWidget(props: InnerSearchNavigateWidgetProps) {
 
   const showIndexing = useHasNotChangedFor(inputValue, SHOW_INDEXING_AFTER_MS);
 
+  const [searchResultsMaxHeight, setSearchResultsMaxHeight] = useState(
+    calculateSearchResultsMaxHeight
+  );
+
   useEffect(() => {
     if (!inputRef.current || isSelectionInitialized.current) {
       return;
@@ -205,10 +219,7 @@ function InnerSearchNavigateWidget(props: InnerSearchNavigateWidgetProps) {
       return [];
     }
 
-    // The iPhone X series is 812px high.
-    // If the window isn't very high, show fewer matches so that the
-    // overlaying search results don't trigger a scroll.
-    const limit = window.innerHeight < 850 ? 5 : 10;
+    // setSearchResultsMaxHeight(calculateSearchResultsMaxHeight);
 
     const inputValueLC = inputValue.toLowerCase().trim();
     const q = splitQuery(inputValue);
@@ -220,7 +231,7 @@ function InnerSearchNavigateWidget(props: InnerSearchNavigateWidgetProps) {
       })
       .sort(([aExact], [bExact]) => bExact - aExact) // Boost exact matches.
       .map(([_, i]) => i)
-      .slice(0, limit);
+      .slice(0, 10);
 
     return indexResults.map(
       (index: number) => (searchIndex.items || [])[index] as ResultItem
@@ -299,6 +310,12 @@ function InnerSearchNavigateWidget(props: InnerSearchNavigateWidgetProps) {
     []
   );
 
+  useEffect(() => {
+    if (isOpen && resultItems.length) {
+      setSearchResultsMaxHeight(calculateSearchResultsMaxHeight);
+    }
+  }, [resultItems, isOpen]);
+
   useEffect(() => {
     const item = resultItems[highlightedIndex];
     if (item && preloadSupported()) {
@@ -522,7 +539,11 @@ function InnerSearchNavigateWidget(props: InnerSearchNavigateWidgetProps) {
       </Button>
 
       <div {...getMenuProps()}>
-        {searchResults && <div className="search-results">{searchResults}</div>}
+        {searchResults && (
+          <div className="search-results" style={searchResultsMaxHeight}>
+            {searchResults}
+          </div>
+        )}
       </div>
     </form>
   );

client/src/ui/molecules/search/index.scss

@@ -123,6 +123,7 @@
     border-radius: var(--elem-radius);
     box-shadow: var(--shadow-01);
     left: 0;
+    overflow-y: auto;
     position: absolute;
     top: 42px;
     width: 100%;