fix alignment issues

AllenInstitute · Nov 20, 2024 · 883578d · 883578d
1 parent 0c895c9
commit 883578d
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 8 deletions.
diff --git a/packages/core/components/ChoiceGroup/ChoiceGroup.module.css b/packages/core/components/ChoiceGroup/ChoiceGroup.module.css
@@ -1,4 +1,3 @@
-
 .choice-group input:disabled + label {
   cursor: not-allowed;
   opacity: 0.5;

diff --git a/packages/core/components/EditMetadata/EditMetadata.module.css b/packages/core/components/EditMetadata/EditMetadata.module.css
@@ -1,6 +1,10 @@
 .combo-box {
   width: 295px;
-  padding-top: var(--margin);
+  padding-bottom: var(--margin);
+}
+
+.choice-group {
+  padding-bottom: var(--margin);
 }
 
 .chips {
@@ -76,7 +80,7 @@
 }
 
 .text-field {
-  padding-top: var(--margin);
+  padding-bottom: var(--margin);
   max-width: 300px;;
 }
 

diff --git a/packages/core/components/EditMetadata/MetadataDetails.module.css b/packages/core/components/EditMetadata/MetadataDetails.module.css
@@ -41,11 +41,15 @@
   width: 100%;
 }
 
-.left-stack-item {
+.stack-item-left {
   padding-top: 5px;
   width: 300px;
 }
 
-.right-stack-item {
+.stack-item-center {
+  padding-bottom: 14px;
+}
+
+.stack-item-right {
   width: 275px;
 }
diff --git a/packages/core/components/EditMetadata/MetadataDetails.tsx b/packages/core/components/EditMetadata/MetadataDetails.tsx
@@ -58,7 +58,7 @@ export default function EditMetadataDetailsList(props: DetailsListProps) {
     return (
         <div className={styles.wrapper}>
             <Stack className={styles.stack} horizontal tokens={{ childrenGap: 20 }}>
-                <StackItem grow className={styles.leftStackItem}>
+                <StackItem grow className={styles.stackItemLeft}>
                     <h4>Existing values</h4>
                     <DetailsList
                         setKey="items"
@@ -94,10 +94,10 @@ export default function EditMetadataDetailsList(props: DetailsListProps) {
                         onRenderItemColumn={renderItemColumn}
                     />
                 </StackItem>
-                <StackItem grow align="center">
+                <StackItem grow align="center" className={styles.stackItemCenter}>
                     <Icon iconName="Forward" />
                 </StackItem>
-                <StackItem grow className={styles.rightStackItem}>
+                <StackItem grow className={styles.stackItemRight}>
                     {/* TODO: Display different entry types depending on datatype of annotation */}
                     <TextField
                         label="Replace with"

diff --git a/packages/core/components/EditMetadata/index.tsx b/packages/core/components/EditMetadata/index.tsx
@@ -66,6 +66,7 @@ export default function EditMetadataForm() {
     return (
         <>
             <ChoiceGroup
+                className={styles.choiceGroup}
                 defaultSelectedKey={editPathway}
                 onChange={(_ev, option) =>
                     setEditPathway(