fix: padding of info panel content (#1032)

chanzuckerberg · Jul 10, 2024 · 5319564 · 5319564
1 parent c4dbb37
commit 5319564
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 12 deletions.
diff --git a/.infra/rdev/values.yaml b/.infra/rdev/values.yaml
@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-7b1d59e2
+        tag: sha-8128ec3a
       replicaCount: 1
       env:
         # env vars common to all deployment stages

diff --git a/client/src/components/geneExpression/infoPanel/datasetInfo/datasetInfoFormat.tsx b/client/src/components/geneExpression/infoPanel/datasetInfo/datasetInfoFormat.tsx
@@ -346,7 +346,7 @@ const buildDatasetMetadataViews = (
 
 const InfoFormat = React.memo<Props>(({ datasetMetadata, allSingleValues }) => (
   <div className={Classes.DRAWER_BODY}>
-    <div className={Classes.DIALOG_BODY}>
+    <div className={Classes.DIALOG_BODY} style={{ margin: "12px" }}>
       <H3>{datasetMetadata?.collection_name || "Collection"}</H3>
       {datasetMetadata && <p>{datasetMetadata.collection_description}</p>}
       {renderCollectionLinks(datasetMetadata)}

diff --git a/client/src/components/geneExpression/infoPanel/geneInfo/style.ts b/client/src/components/geneExpression/infoPanel/geneInfo/style.ts
@@ -11,7 +11,7 @@ import { Icon } from "@blueprintjs/core";
 
 import * as globals from "../../../../globals";
 import * as styles from "../../util";
-import { gray100, gray500 } from "../../../theme";
+import { gray100, gray500, spacesM } from "../../../theme";
 
 export const GeneInfoWrapper = styled.div`
   display: flex;
@@ -21,14 +21,11 @@ export const GeneInfoWrapper = styled.div`
 
 export const GeneInfoContainer = styled.div`
   width: ${styles.width + styles.margin.left + styles.margin.right}px;
-  height: "auto";
+  height: "50%";
 `;
 
 export const GeneInfoEmpty = styled.div`
-  margin-top: ${styles.margin.top}px;
-  margin-left: ${styles.margin.left}px;
-  margin-right: ${styles.margin.right}px;
-  margin-bottom: ${styles.margin.bottom}px;
+  margin: ${spacesM}px;
 `;
 
 export const GeneSymbol = styled.h1`

diff --git a/client/src/components/geneExpression/infoPanel/style.ts b/client/src/components/geneExpression/infoPanel/style.ts
@@ -14,15 +14,15 @@ export const InfoPanelWrapper = styled.div<InfoPanelWrapperProps>`
   overflow: hidden;
   position: ${(props) => (props.isMinimized ? "absolute" : "relative")};
   bottom: ${(props) => (props.isMinimized ? "0" : "auto")};
-  height: ${(props) => (props.isMinimized ? "40px" : "auto")};
+  height: ${(props) => (props.isMinimized ? "40px" : "50%")};
 `;
 
 export const InfoPanelContent = styled.div<InfoPanelWrapperProps>`
   width: 100%;
-  padding: 30px 0px 0px 0px;
+  padding-top: 30px;
   position: relative;
   overflow-y: auto;
-  max-height: ${(props) => (props.isMinimized ? "0" : "400px")};
+  min-height: ${(props) => (props.isMinimized ? "0" : "50%")};
 `;
 
 export const InfoPanelHeader = styled.div`
@@ -33,7 +33,7 @@ export const InfoPanelHeader = styled.div`
   width: 100%;
   border-top: 1px solid ${gray300};
   border-bottom: 1px solid ${gray300};
-  padding: 16px 0px 8px 10px;
+  padding: 17px 0px 8px 10px;
   height: 35px;
   position: absolute;
   background: white;