fix font size

client/src/components/categorical/category/index.js

@@ -143,7 +143,7 @@ class Category extends React.Component {
               <input disabled id={checkboxID} checked type="checkbox" />
               <span className="bp3-control-indicator" />
             </label>
-            <Truncate fontSize={12} size={this._labelWidth}>
+            <Truncate fontSize={14} size={this._labelWidth}>
               <span
                 style={{
                   cursor: "pointer",
@@ -194,10 +194,10 @@ class Category extends React.Component {
     ) {
       return (
         <div style={{ marginBottom: 10, marginTop: 4 }}>
-          <Truncate size={150} fontSize={12} bold>
+          <Truncate size={150} fontSize={14} bold>
             <span style={{ fontWeight: 700 }}>{metadataField}</span>
           </Truncate>
-          <Truncate size={150} fontSize={12}>
+          <Truncate size={150} fontSize={14}>
             <span>
               {`: ${schema.annotations.obsByName[metadataField].categories[0]}`}
             </span>

client/src/components/categorical/value/index.js

@@ -381,7 +381,7 @@ class CategoryValue extends React.Component {
                 onMouseLeave={this.handleMouseEnter}
               />
             </label>
-            <Truncate size={labelWidth} fontSize={12}>
+            <Truncate size={labelWidth} fontSize={14}>
               <span
                 data-testid={`categorical-value-${metadataField}-${displayString}`}
                 data-testclass="categorical-value"
@@ -396,6 +396,7 @@ class CategoryValue extends React.Component {
                       ? "italic"
                       : "normal",
                   display: "inline-block",
+                  border: "solid black 1px",
                   overflow: "hidden",
                   lineHeight: "1.1em",
                   height: "1.1em",