Merge pull request #131 from scroll-tech/fix-text-overflow

fix: text overflow on seach modal

Author: dghelm

src/components/Header/Search/Search.module.css

@@ -6,15 +6,14 @@
   top: 65px;
   left: 0;
   right: 0;
-  height: 100vh;
+  height: calc(100vh - 65px);
   padding-top: 60px;
   border-radius: 0;
 }
 
 #searchModal.large {
   top: 0;
   height: fit-content;
-  max-height: 80vh;
   background: #fff;
   position: absolute;
   border-radius: 24px;
@@ -24,7 +23,7 @@
 
 .resultsWrapper {
   padding: 20px 20px 1rem;
-  overflow: overlay;
+  height: calc(100% - 50px);
 }
 
 .searchInput {
@@ -129,11 +128,6 @@
   box-sizing: content-box;
 }
 
-.hitWrapper {
-  max-height: 40vh;
-  overflow: overlay;
-}
-
 .hitWrapper ol {
   list-style: none;
 }
@@ -147,6 +141,9 @@
 .queryResults {
   display: grid;
   grid-template-columns: 1fr;
+  grid-auto-rows: max-content;
+  height: 100%;
+  overflow-y: auto;
 }
 
 .queryResults h6 {
@@ -224,8 +221,8 @@
   }
 
   .hitWrapper {
-    max-height: calc(80vh - 100px);
-    overflow: auto;
+    max-height: calc(80vh - 150px);
+    overflow-y: auto;
   }
 
   .hitList li {
@@ -259,4 +256,9 @@
   .resultsWrapper * {
     padding-left: 0 !important;
   }
+
+  .queryResults.large {
+    max-height: calc(80vh - 48px);
+    height: max-content;
+  }
 }

src/components/Header/Search/SearchModal.tsx

@@ -29,14 +29,15 @@ const recommendedArticles = [
   },
 ]
 
-function EmptyQueryBoundary({ children, fallback }) {
+function EmptyQueryBoundary({ children, size, fallback }) {
   const { indexUiState } = useInstantSearch()
 
   const recentArticles = JSON.parse(localStorage.getItem("recentArticles") || "[]")
 
+  console.log(indexUiState, "indexUiState")
   if (!indexUiState.query) {
     return (
-      <div className={styles.queryResults}>
+      <div className={clsx(styles.queryResults, styles[size])}>
         <div>
           <h6 style={{ paddingLeft: "var(--space-2x)", marginBottom: "1rem" }}>Recommended articles</h6>
           <div className={styles.hitWrapper}>
@@ -108,6 +109,7 @@ function NoResultsBoundary({ children }) {
 function CustomHits({ title, hitClassName, ...props }: UseHitsProps & { title: string; hitClassName?: string }) {
   const { hits, results } = useHits(props)
 
+  console.log(hits, "hits")
   if (hits.length === 0) return null
   return (
     <div>
@@ -150,9 +152,9 @@ export function SearchModal({ size = "mini", isOpen, onClose }: { size: Size; is
       <InstantSearch indexName={getIndexName()} searchClient={searchClient}>
         <SearchInput size={size} onClose={onClose} />
         <div className={styles.resultsWrapper}>
-          <EmptyQueryBoundary fallback={null}>
+          <EmptyQueryBoundary fallback={null} size={size}>
             <NoResultsBoundary>
-              <div className={styles.queryResults}>
+              <div className={clsx(styles.queryResults, styles[size])}>
                 <CustomHits
                   title="Title Matches"
                   escapeHTML={false}