Make unit type display look better

packages/components/src/components/SquiggleViewer/ValueViewer/Body.tsx

@@ -39,7 +39,6 @@ const WithComment: FC<PropsWithChildren<WithCommentProps>> = ({
       )}
     >
       <MarkdownViewer md={comment} textSize="sm" />
-      {unitType && (<MarkdownViewer md={unitType} textSize="sm" />)}
     </div>
   );
 

packages/components/src/components/SquiggleViewer/ValueViewer/UnitType.tsx

@@ -0,0 +1,21 @@
+import clsx from "clsx";
+import { FC } from "react";
+
+type UnitTypeProps = {
+    unitType: string;
+};
+
+export const UnitType: FC<UnitTypeProps> = ({ unitType }) => {
+    return (
+        <div
+        className={clsx(
+            // Copilot auto-completed these classes but it looks pretty good
+            "text-xs font-medium text-gray-500",
+            "rounded-full px-2 py-0.5",
+            /* "bg-gray-100" */  // IMO looks better without background
+        )}
+        >
+        :: {unitType}
+        </div>
+    );
+}

packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx

@@ -29,6 +29,7 @@ import {
 } from "../ViewerProvider.js";
 import { Body } from "./Body.js";
 import { Title } from "./Title.js";
+import { UnitType } from "./UnitType.js";
 
 const CommentIconForValue: FC<{ value: SqValueWithContext }> = ({ value }) => {
   const comment = getValueComment(value);
@@ -207,6 +208,8 @@ export const ValueWithContextViewer: FC<Props> = ({
                 }}
               />
 
+              {unitType && (<UnitType {...{unitType}} />)}
+
               {!isOpen && (
                 <div className="ml-2 text-sm text-blue-800">
                   <SquiggleValuePreview value={value} />