From 027d0aaee8d56025073f2b34aedddc197a6909d2 Mon Sep 17 00:00:00 2001
From: Trevor Bedford <trevor@bedford.io>
Date: Tue, 9 Mar 2021 16:04:06 -0800
Subject: [PATCH] Styling adjustments for mutation list

---
 src/components/tree/infoPanels/click.js | 20 ++++++++++++--------
 src/globalStyles.js                     |  4 +++-
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/tree/infoPanels/click.js b/src/components/tree/infoPanels/click.js
index dc5406ef2..96146489a 100644
--- 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}>
+              {gene}: {muts.sort(mutSortFn).join(", ")}
+            </div>
+          ))
+      }</td>
+    </tr>
   );
 };
 
diff --git a/src/globalStyles.js b/src/globalStyles.js
index 41abf3b87..86fa61cd7 100644
--- a/src/globalStyles.js
+++ b/src/globalStyles.js
@@ -262,7 +262,9 @@ export const infoPanelStyles = {
   item: {
     paddingTop: 4,
     paddingBottom: 4,
-    minWidth: 120
+    minWidth: 130,
+    verticalAlign: "top",
+    fontWeight: 300
   },
   break: {
     marginBottom: "10px"