From 7abe2ff229ba6f0703044396ce3b193f318f6dec Mon Sep 17 00:00:00 2001
From: mateusz-winiarczyk <mateusz.winiarczyk@appunite.com>
Date: Mon, 4 Mar 2024 15:04:37 +0100
Subject: [PATCH] fix(search): fix incomplete scrolling and visibility
(MIN-272)
---
.../BioEntitiesPinsList/BioEntitiesPinsList.component.tsx | 2 +-
.../BioEntitiesResultsList.component.tsx | 2 +-
.../GroupedSearchResults/GroupedSearchResults.component.tsx | 5 ++++-
.../ResultsList/PinsList/PinsList.component.tsx | 4 ++--
.../ResultsList/ResultsList.component.tsx | 2 +-
.../SearchDrawerWrapper/SearchDrawerWrapper.component.tsx | 6 +++---
6 files changed, 12 insertions(+), 9 deletions(-)
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsList.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsList.component.tsx
index b563e3f9..1a45d108 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsList.component.tsx
+++ b/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
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesResultsList.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesResultsList.component.tsx
index eea837b2..1b3b839c 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesResultsList.component.tsx
+++ b/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>
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/GroupedSearchResults.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/GroupedSearchResults.component.tsx
index eef4ed38..5d83a4e5 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/GroupedSearchResults.component.tsx
+++ b/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 />
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx
index 1ab513f9..6e91ddbf 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx
+++ b/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 => {
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.tsx
index 0d5ab7ed..28f99dd6 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.tsx
+++ b/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}
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.component.tsx
index 77f0275e..573435d0 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.component.tsx
+++ b/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>
)}
--
GitLab