#1152 - fix overflow issues when filter chips were present

also some other minor styling stuff
ral-facilities · May 17, 2024 · 1971ea4 · 1971ea4
1 parent 06539eb
commit 1971ea4
Show file tree

Hide file tree

Showing 9 changed files with 258 additions and 221 deletions.
diff --git a/packages/datagateway-search/src/card/datasetSearchCardView.component.tsx b/packages/datagateway-search/src/card/datasetSearchCardView.component.tsx
@@ -436,45 +436,47 @@ const DatasetCardView: React.FC<DatasetCardViewProps> = (props) => {
           />
         )}
       </Grid>
-      <Grid item xs={10}>
+      <Grid container item xs={10} direction="column" wrap="nowrap">
         <SelectedFilterChips
           filters={filters}
           onRemoveFilter={removeFilterChip}
         />
-        <Paper variant="outlined" sx={{ height: '100%', marginTop: 1 }}>
-          <div>
-            {aborted ? (
-              <Paper>
-                <Typography align="center" variant="h6" component="h6">
-                  {t('loading.abort_message')}
-                </Typography>
-              </Paper>
-            ) : (
-              <CardView
-                entityName="Dataset"
-                data={paginatedSource ?? []}
-                totalDataCount={
-                  aggregatedIds?.length + (hasNextPage ? 1 : 0) ?? 0
-                }
-                onPageChange={pushPage}
-                onFilter={pushFilter}
-                onSort={handleSort}
-                onResultsChange={pushResults}
-                loadedData={!isLoading}
-                loadedCount={!isLoading}
-                filters={{}}
-                sort={{}}
-                page={page}
-                results={results}
-                title={title}
-                description={description}
-                information={information}
-                moreInformation={moreInformation}
-                buttons={buttons}
-              />
-            )}
-          </div>
-        </Paper>
+        <Grid item xs>
+          <Paper variant="outlined" sx={{ height: '100%', marginTop: 1 }}>
+            <div>
+              {aborted ? (
+                <Paper>
+                  <Typography align="center" variant="h6" component="h6">
+                    {t('loading.abort_message')}
+                  </Typography>
+                </Paper>
+              ) : (
+                <CardView
+                  entityName="Dataset"
+                  data={paginatedSource ?? []}
+                  totalDataCount={
+                    aggregatedIds?.length + (hasNextPage ? 1 : 0) ?? 0
+                  }
+                  onPageChange={pushPage}
+                  onFilter={pushFilter}
+                  onSort={handleSort}
+                  onResultsChange={pushResults}
+                  loadedData={!isLoading}
+                  loadedCount={!isLoading}
+                  filters={{}}
+                  sort={{}}
+                  page={page}
+                  results={results}
+                  title={title}
+                  description={description}
+                  information={information}
+                  moreInformation={moreInformation}
+                  buttons={buttons}
+                />
+              )}
+            </div>
+          </Paper>
+        </Grid>
       </Grid>
     </Grid>
   );

diff --git a/packages/datagateway-search/src/card/investigationSearchCardView.component.tsx b/packages/datagateway-search/src/card/investigationSearchCardView.component.tsx
@@ -407,46 +407,48 @@ const InvestigationCardView: React.FC<InvestigationCardProps> = (props) => {
           />
         )}
       </Grid>
-      <Grid item xs={10}>
+      <Grid container item xs={10} direction="column" wrap="nowrap">
         <SelectedFilterChips
           filters={filters}
           onRemoveFilter={removeFilterChip}
         />
-        <Paper variant="outlined" sx={{ height: '100%', marginTop: 1 }}>
-          <div>
-            {aborted ? (
-              <Paper>
-                <Typography align="center" variant="h6" component="h6">
-                  {t('loading.abort_message')}
-                </Typography>
-              </Paper>
-            ) : (
-              <CardView
-                entityName="Investigation"
-                data={paginatedSource ?? []}
-                totalDataCount={
-                  aggregatedIds?.length + (hasNextPage ? 1 : 0) ?? 0
-                }
-                onPageChange={pushPage}
-                onFilter={pushFilter}
-                onSort={handleSort}
-                onResultsChange={pushResults}
-                loadedData={!isLoading}
-                loadedCount={!isLoading}
-                filters={{}}
-                sort={sort}
-                page={page}
-                results={results}
-                title={title}
-                description={description}
-                information={information}
-                moreInformation={moreInformation}
-                buttons={buttons}
-                allIds={aggregatedIds}
-              />
-            )}
-          </div>
-        </Paper>
+        <Grid item xs>
+          <Paper variant="outlined" sx={{ height: '100%', marginTop: 1 }}>
+            <div>
+              {aborted ? (
+                <Paper>
+                  <Typography align="center" variant="h6" component="h6">
+                    {t('loading.abort_message')}
+                  </Typography>
+                </Paper>
+              ) : (
+                <CardView
+                  entityName="Investigation"
+                  data={paginatedSource ?? []}
+                  totalDataCount={
+                    aggregatedIds?.length + (hasNextPage ? 1 : 0) ?? 0
+                  }
+                  onPageChange={pushPage}
+                  onFilter={pushFilter}
+                  onSort={handleSort}
+                  onResultsChange={pushResults}
+                  loadedData={!isLoading}
+                  loadedCount={!isLoading}
+                  filters={{}}
+                  sort={sort}
+                  page={page}
+                  results={results}
+                  title={title}
+                  description={description}
+                  information={information}
+                  moreInformation={moreInformation}
+                  buttons={buttons}
+                  allIds={aggregatedIds}
+                />
+              )}
+            </div>
+          </Paper>
+        </Grid>
       </Grid>
     </Grid>
   );

diff --git a/packages/datagateway-search/src/facet/components/facetPanel/facetPanel.component.tsx b/packages/datagateway-search/src/facet/components/facetPanel/facetPanel.component.tsx
@@ -135,7 +135,9 @@ function FacetPanel({
       >
         <Typography variant="h6">{t('facetPanel.title')}</Typography>
         {showApplyButton && (
-          <Button onClick={onApplyFacetFilters}>{t('facetPanel.apply')}</Button>
+          <Button variant="contained" onClick={onApplyFacetFilters}>
+            {t('facetPanel.apply')}
+          </Button>
         )}
       </Box>
 

diff --git a/packages/datagateway-search/src/facet/components/selectedFilterChips.component.tsx b/packages/datagateway-search/src/facet/components/selectedFilterChips.component.tsx
@@ -29,12 +29,12 @@ function SelectedFilterChips({
       aria-label={t('selectedFilters')}
       direction="row"
       spacing={1}
-      sx={{ flexWrap: 'wrap', gap: 1 }}
+      sx={{ flexWrap: 'wrap', rowGap: 1, ml: -1 }}
     >
-      {Object.entries(filters).flatMap(([filterKey, filterValue]) => {
+      {Object.entries(filters).flatMap(([filterKey, filterValue], i) => {
         if (!Array.isArray(filterValue)) return [];
 
-        return filterValue.flatMap((value) => {
+        return filterValue.flatMap((value, j) => {
           if (typeof value === 'string') {
             return [
               <Chip
@@ -43,6 +43,7 @@ function SelectedFilterChips({
                 onDelete={() => {
                   onRemoveFilter(filterKey, value);
                 }}
+                sx={i === 0 && j === 0 ? { ml: 1 } : {}}
               />,
             ];
           }
@@ -55,6 +56,7 @@ function SelectedFilterChips({
                 onDelete={() => {
                   onRemoveFilter(filterKey, value);
                 }}
+                sx={i === 0 && j === 0 ? { ml: 1 } : {}}
               />,
             ];
           }

diff --git a/packages/datagateway-search/src/searchPageContainer.component.tsx b/packages/datagateway-search/src/searchPageContainer.component.tsx
@@ -387,8 +387,8 @@ const SearchPageContainer: React.FC = () => {
   }, []);
 
   // Table should take up page but leave room for: SG appbar, SG footer,
-  // search box, search box padding, display as cards button, loading bar
-  const containerHeight = `calc(100vh - 64px - 36px - ${searchBoxHeight}px - 8px - 49px)`;
+  // search box, search box padding, display as cards button, loading bar, paper outline
+  const containerHeight = `calc(100vh - 64px - 36px - ${searchBoxHeight}px - 8px - 49px - 2px)`;
 
   const { data: cartItems } = useCart();
   const { push } = useHistory();
@@ -489,7 +489,11 @@ const SearchPageContainer: React.FC = () => {
                   data-testid="container-search-table"
                   id="container-search-table"
                 >
-                  <DataViewPaper view={view} containerHeight={containerHeight}>
+                  <DataViewPaper
+                    view={view}
+                    containerHeight={containerHeight}
+                    variant="outlined"
+                  >
                     <SearchTabs
                       view={view}
                       containerHeight={containerHeight}

diff --git a/packages/datagateway-search/src/searchTabs/searchTabs.component.tsx b/packages/datagateway-search/src/searchTabs/searchTabs.component.tsx
@@ -220,55 +220,53 @@ const SearchTabs = ({
         </StyledBox>
       </StyledBox>
       <SearchResultCountDispatch.Provider value={dispatch}>
-        <Box>
-          <TabPanel value={currentTab} index="investigation">
-            {view === 'card' ? (
-              <InvestigationCardView hierarchy={hierarchy} />
-            ) : (
-              <Paper
-                sx={{
-                  height: `calc(${containerHeight} - 56px)`,
-                  minHeight: `calc(500px - 56px)`,
-                  overflowX: 'auto',
-                  overflowY: 'hidden',
-                }}
-                elevation={0}
-              >
-                <InvestigationSearchTable hierarchy={hierarchy} />
-              </Paper>
-            )}
-          </TabPanel>
-          <TabPanel value={currentTab} index="dataset">
-            {view === 'card' ? (
-              <DatasetCardView hierarchy={hierarchy} />
-            ) : (
-              <Paper
-                sx={{
-                  height: `calc(${containerHeight} - 56px)`,
-                  minHeight: `calc(500px - 56px)`,
-                  overflowX: 'auto',
-                  overflowY: 'hidden',
-                }}
-                elevation={0}
-              >
-                <DatasetSearchTable hierarchy={hierarchy} />
-              </Paper>
-            )}
-          </TabPanel>
-          <TabPanel value={currentTab} index="datafile">
+        <TabPanel value={currentTab} index="investigation">
+          {view === 'card' ? (
+            <InvestigationCardView hierarchy={hierarchy} />
+          ) : (
+            <Paper
+              sx={{
+                height: `calc(${containerHeight} - 56px)`,
+                minHeight: `calc(500px - 56px)`,
+                overflow: 'auto',
+                bgcolor: 'background.default',
+              }}
+              elevation={0}
+            >
+              <InvestigationSearchTable hierarchy={hierarchy} />
+            </Paper>
+          )}
+        </TabPanel>
+        <TabPanel value={currentTab} index="dataset">
+          {view === 'card' ? (
+            <DatasetCardView hierarchy={hierarchy} />
+          ) : (
             <Paper
               sx={{
                 height: `calc(${containerHeight} - 56px)`,
                 minHeight: `calc(500px - 56px)`,
-                overflowX: 'auto',
-                overflowY: 'hidden',
+                overflow: 'auto',
+                bgcolor: 'background.default',
               }}
               elevation={0}
             >
-              <DatafileSearchTable hierarchy={hierarchy} />
+              <DatasetSearchTable hierarchy={hierarchy} />
             </Paper>
-          </TabPanel>
-        </Box>
+          )}
+        </TabPanel>
+        <TabPanel value={currentTab} index="datafile">
+          <Paper
+            sx={{
+              height: `calc(${containerHeight} - 56px)`,
+              minHeight: `calc(500px - 56px)`,
+              overflow: 'auto',
+              bgcolor: 'background.default',
+            }}
+            elevation={0}
+          >
+            <DatafileSearchTable hierarchy={hierarchy} />
+          </Paper>
+        </TabPanel>
       </SearchResultCountDispatch.Provider>
     </div>
   );