Minor cleanup

FormidableLabs · Nov 15, 2023 · 5d3b926 · 5d3b926
1 parent 7db71d0
commit 5d3b926
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 50 deletions.
diff --git a/packages/webui/src/components/Fields.tsx b/packages/webui/src/components/Fields.tsx
@@ -1,7 +1,5 @@
 import { tw } from '@/utils';
 
-import Label from './Label';
-
 type FieldProps = React.HTMLAttributes<HTMLElement> & {
   label: string;
 };
@@ -12,20 +10,18 @@ type FieldsProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {
 
 export default function Fields({ className, children, ...props }: FieldsProps) {
   return (
-    <div className={tw('w-full table-fixed text-xs pr-3 py-2', className)} {...props}>
-      <div className="space-y-2 table-row-group">{children}</div>
-    </div>
+    <table className={tw('table table-fixed min-w-full text-xs', className)} {...props}>
+      <tbody>{children}</tbody>
+    </table>
   );
 }
 
 export function Field({ label, className, children, ...props }: FieldProps) {
   if (!children) return null;
   return (
-    <div className="table-row" {...props}>
-      <div className={tw('table-cell w-[200px]', className)}>
-        <Label label={label} />
-      </div>
-      <div className="table-cell font-mono">{children}</div>
-    </div>
+    <tr className={className} {...props}>
+      <td className={tw('table-cell w-[200px] py-1 font-semibold font-mono uppercase', className)}>{label}</td>
+      <td className="table-cell font-mono">{children}</td>
+    </tr>
   );
 }
diff --git a/packages/webui/src/components/Label.test.tsx b/packages/webui/src/components/Label.test.tsx
diff --git a/packages/webui/src/components/Label.tsx b/packages/webui/src/components/Label.tsx
diff --git a/packages/webui/src/components/index.ts b/packages/webui/src/components/index.ts
@@ -9,7 +9,6 @@ export { default as DateTime } from './DateTime';
 export { default as Fields, Field } from './Fields';
 export { default as Input } from './Input';
 export { default as KeyValueList } from './KeyValueList';
-export { default as Label } from './Label';
 export { default as Loading } from './Loading';
 export { default as Menu } from './Menu';
 export { default as SearchInput } from './SearchInput';

diff --git a/packages/webui/src/components/ui/TraceDetail.tsx b/packages/webui/src/components/ui/TraceDetail.tsx
@@ -81,7 +81,7 @@ export default function TraceDetail() {
 
   return (
     <div className="h-full flex flex-col p-3 pr-0 bg-manatee-50">
-      <div className="sticky top-0" data-test-id="summary">
+      <div className="sticky top-0 pr-3" data-test-id="summary">
         <div className="flex flex-row gap-2 items-center">
           <div className="flex-1 flex flex-row gap-2">
             <div className="flex items-center">

diff --git a/packages/webui/src/systems/GraphQL.tsx b/packages/webui/src/systems/GraphQL.tsx
@@ -44,8 +44,8 @@ export default class GraphQLSystem implements System<GraphQLData> {
     const { operationType, operationName, query } = data;
 
     return (
-      <>
-        <Fields className="border-t border-manatee-400 pt-4">
+      <div className="border-t border-manatee-400 pt-3 mt-3">
+        <Fields>
           <Field data-test-id="name" label="Name">
             {operationName}
           </Field>
@@ -56,7 +56,7 @@ export default class GraphQLSystem implements System<GraphQLData> {
             <Code data-test-id="query">{query}</Code>
           </Field>
         </Fields>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/webui/src/systems/Sanity.tsx b/packages/webui/src/systems/Sanity.tsx
@@ -48,16 +48,16 @@ export default class SanitySystem implements System<SanityData> {
     const { type, query } = data;
 
     return (
-      <>
-        <Fields className="border-t border-manatee-400 pt-4">
+      <div className="border-t border-manatee-400 pt-3 mt-3">
+        <Fields>
           <Field data-test-id="type" label="Item type">
             {type}
           </Field>
           <Field label="Query">
             <Code data-test-id="query">{query}</Code>
           </Field>
         </Fields>
-      </>
+      </div>
     );
   }