Styling adjustments for mutation list

nextstrain · Mar 10, 2021 · 0a6fb81 · 0a6fb81
1 parent 4fee777
commit 0a6fb81
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/components/tree/infoPanels/click.js b/src/components/tree/infoPanels/click.js
@@ -79,14 +79,18 @@ const MutationTable = ({mutations}) => {
   };
   // we encode the table here (rather than via `item()`) to set component keys appropriately
   return (
-    Object.entries(mutations)
-      .sort(geneSortFn)
-      .map(([gene, muts], index) => (
-        <tr key={gene}>
-          <th style={infoPanelStyles.item}>{index===0 ? "Mutations from root" : ""}</th>
-          <td style={infoPanelStyles.item}>{`${gene}:${muts.sort(mutSortFn).join(", ")}`}</td>
-        </tr>
-      ))
+    <tr key={"Mutations"}>
+      <th style={infoPanelStyles.item}>{"Mutations from root"}</th>
+      <td style={infoPanelStyles.item}>{
+        Object.entries(mutations)
+          .sort(geneSortFn)
+          .map(([gene, muts]) => (
+            <div style={{...infoPanelStyles.item, ...{fontWeight: 300}}}>
+              {gene}: {muts.sort(mutSortFn).join(", ")}
+            </div>
+          ))
+      }</td>
+    </tr>
   );
 };
 

diff --git a/src/globalStyles.js b/src/globalStyles.js
@@ -262,7 +262,8 @@ export const infoPanelStyles = {
   item: {
     paddingTop: 4,
     paddingBottom: 4,
-    minWidth: 120
+    minWidth: 130,
+    verticalAlign: "top"
   },
   break: {
     marginBottom: "10px"