Merge pull request #160 from bento-platform/style/search-overview-hea…

…dings style: fix top margins on search overview chart headings
bento-platform · Mar 25, 2024 · 9d92152 · 9d92152
2 parents ac8b76f + 8fd79e4
commit 9d92152
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/src/js/components/Search/SearchResultsPane.tsx b/src/js/components/Search/SearchResultsPane.tsx
@@ -29,7 +29,15 @@ const SearchResultsPane = ({
           padding: '10px 33px',
           maxWidth: '1200px',
           width: '100%',
-          minHeight: '28rem',
+          // Set a minimum height (i.e., an expected final height, which can be exceeded) to prevent this component from
+          // suddenly increasing in height after it loads. This is calculated from the sum of the following parts:
+          //   chart (300)
+          // + heading (24 + 8 [0.5em] bottom margin)
+          // + card body padding (2*24 = 48)
+          // + card wrapper padding (2*10 = 20)
+          // + border (2*1 = 2)
+          // = 402:
+          minHeight: '402px',
           ...BOX_SHADOW,
         }}
         loading={isFetchingData}
@@ -58,15 +66,19 @@ const SearchResultsPane = ({
             </Space>
           </Col>
           <Col xs={24} lg={10}>
-            <Typography.Title level={5}>{t('Biosamples')}</Typography.Title>
+            <Typography.Title level={5} style={{ marginTop: 0 }}>
+              {t('Biosamples')}
+            </Typography.Title>
             {!hasInsufficientData && biosampleChartData.length ? (
               <PieChart data={biosampleChartData} height={PIE_CHART_HEIGHT} sort={true} />
             ) : (
               <CustomEmpty text="No Results" />
             )}
           </Col>
           <Col xs={24} lg={10}>
-            <Typography.Title level={5}>{t('Experiments')}</Typography.Title>
+            <Typography.Title level={5} style={{ marginTop: 0 }}>
+              {t('Experiments')}
+            </Typography.Title>
             {!hasInsufficientData && experimentChartData.length ? (
               <PieChart data={experimentChartData} height={PIE_CHART_HEIGHT} sort={true} />
             ) : (