From a67ab2ea1061f969842f281187449d1605a188f7 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Mon, 25 Mar 2024 13:14:26 -0400
Subject: [PATCH 1/3] style: fix top margins on search overview chart headings
 also reduces minimum height to what is necessary.

---
 src/js/components/Search/SearchResultsPane.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/js/components/Search/SearchResultsPane.tsx b/src/js/components/Search/SearchResultsPane.tsx
index b6aa3740..5c418420 100644
--- a/src/js/components/Search/SearchResultsPane.tsx
+++ b/src/js/components/Search/SearchResultsPane.tsx
@@ -29,7 +29,13 @@ const SearchResultsPane = ({
           padding: '10px 33px',
           maxWidth: '1200px',
           width: '100%',
-          minHeight: '28rem',
+          //   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: 402,
           ...BOX_SHADOW,
         }}
         loading={isFetchingData}
@@ -58,7 +64,9 @@ 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} />
             ) : (
@@ -66,7 +74,9 @@ const SearchResultsPane = ({
             )}
           </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} />
             ) : (

From 2d7bff3f5343f41b9edd8a8d4f975a685f5044a9 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Mon, 25 Mar 2024 14:11:03 -0400
Subject: [PATCH 2/3] lint: consistent unit spec

---
 src/js/components/Search/SearchResultsPane.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/components/Search/SearchResultsPane.tsx b/src/js/components/Search/SearchResultsPane.tsx
index 5c418420..fa7201c3 100644
--- a/src/js/components/Search/SearchResultsPane.tsx
+++ b/src/js/components/Search/SearchResultsPane.tsx
@@ -35,7 +35,7 @@ const SearchResultsPane = ({
           // + card wrapper padding (2*10 = 20)
           // + border (2*1 = 2)
           // = 402:
-          minHeight: 402,
+          minHeight: '402px',
           ...BOX_SHADOW,
         }}
         loading={isFetchingData}

From 8fd79e4689e254260270fd2193842125929cc9b6 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Mon, 25 Mar 2024 14:12:54 -0400
Subject: [PATCH 3/3] chore: comment explaining SearchResultsPane minHeight

---
 src/js/components/Search/SearchResultsPane.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/js/components/Search/SearchResultsPane.tsx b/src/js/components/Search/SearchResultsPane.tsx
index fa7201c3..9b974138 100644
--- a/src/js/components/Search/SearchResultsPane.tsx
+++ b/src/js/components/Search/SearchResultsPane.tsx
@@ -29,6 +29,8 @@ const SearchResultsPane = ({
           padding: '10px 33px',
           maxWidth: '1200px',
           width: '100%',
+          // 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)