Merge branch 'MIN-272-incomplete-scrolling-and-visibility-search-results' into 'development'

fix(search): fix incomplete scrolling and visibility (MIN-272)

See merge request !139

src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsList.component.tsx

@@ -7,7 +7,7 @@ interface BioEntitiesPinsListProps {
 
 export const BioEntitiesPinsList = ({ bioEnititesPins }: BioEntitiesPinsListProps): JSX.Element => {
   return (
-    <ul className="h-[calc(100vh-198px)] overflow-auto px-6 py-2">
+    <ul className="h-[calc(100%-224px)] max-h-[calc(100%-224px)] overflow-auto px-6 py-2">
       {bioEnititesPins &&
         bioEnititesPins.map(result => (
           <BioEntitiesPinsListItem

src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesResultsList.component.tsx

@@ -16,7 +16,7 @@ export const BioEntitiesResultsList = (): JSX.Element => {
   };
 
   return (
-    <div>
+    <div className="h-full">
       <DrawerHeadingBackwardButton backwardFunction={navigateToGroupedSearchResults}>
         {mapName}
       </DrawerHeadingBackwardButton>

src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/GroupedSearchResults.component.tsx

@@ -7,7 +7,10 @@ export const CLOSE_BUTTON_ROLE = 'close-drawer-button';
 
 export const GroupedSearchResults = (): JSX.Element => {
   return (
-    <div className="flex flex-col" data-testid="grouped-search-results">
+    <div
+      className="flex h-[calc(100%-124px)] max-h-[calc(100%-124px)] flex-col overflow-auto"
+      data-testid="grouped-search-results"
+    >
       <div className="px-6">
         <Accordion allowZeroExpanded>
           <BioEntitiesAccordion />

src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx

@@ -12,7 +12,7 @@ export const PinsList = ({ pinsList, type }: PinsListProps): JSX.Element => {
   switch (type) {
     case 'drugs':
       return (
-        <div className="h-[calc(100vh-198px)] overflow-auto">
+        <div className="h-[calc(100%-214px)] max-h-[calc(100%-214px)] overflow-auto">
           <AccordionsDetails pinsList={pinsList} type={type} />
           <ul className="px-6 py-2" data-testid="pins-list">
             {pinsList.map(result => {
@@ -27,7 +27,7 @@ export const PinsList = ({ pinsList, type }: PinsListProps): JSX.Element => {
       return <div />;
     case 'chemicals':
       return (
-        <div className="h-[calc(100vh-198px)] overflow-auto">
+        <div className="h-[calc(100%-214px)] max-h-[calc(100%-214px)] overflow-auto">
           <AccordionsDetails pinsList={pinsList} type={type} />
           <ul className="px-6 py-2" data-testid="pins-list">
             {pinsList.map(result => {

src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.tsx

@@ -15,7 +15,7 @@ export const ResultsList = (): JSX.Element => {
   };
 
   return (
-    <div>
+    <div className="h-full">
       <DrawerHeadingBackwardButton backwardFunction={navigateToGroupedSearchResults}>
         <span className="capitalize" data-testid="drawer-heading-text">
           {stepType}

src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.component.tsx

@@ -22,18 +22,18 @@ export const SearchDrawerWrapper = (): JSX.Element => {
     <>
       <SearchDrawerHeader />
       <SearchDrawerTabs />
-      <div data-testid="search-drawer-content">
+      <div data-testid="search-drawer-content" className="h-full max-h-full">
         {/* first step for displaying search results, drawers etc */}
         {currentStep === STEP.FIRST && <GroupedSearchResults />}
         {/* 2nd step for bioEntities aka content */}
         {currentStep === STEP.SECOND && isBioEntityType && (
-          <div data-testid="search-second-step">
+          <div data-testid="search-second-step" className="h-full">
             <BioEntitiesResultsList />
           </div>
         )}
         {/* 2nd step for drugs,chemicals */}
         {currentStep === STEP.SECOND && isChemicalsOrDrugsType && (
-          <div data-testid="search-second-step">
+          <div data-testid="search-second-step" className="h-full">
             <ResultsList />
           </div>
         )}