diff --git a/invokeai/frontend/web/src/features/metadata/components/MetadataControlNets.tsx b/invokeai/frontend/web/src/features/metadata/components/MetadataControlNets.tsx
index 2e8e3b6f9a..2dd57c04b7 100644
--- a/invokeai/frontend/web/src/features/metadata/components/MetadataControlNets.tsx
+++ b/invokeai/frontend/web/src/features/metadata/components/MetadataControlNets.tsx
@@ -1,3 +1,4 @@
+import { Text } from '@invoke-ai/ui-library';
 import type { ControlNetConfig } from 'features/controlAdapters/store/types';
 import { MetadataItemView } from 'features/metadata/components/MetadataItemView';
 import type { MetadataHandlers } from 'features/metadata/types';
@@ -59,7 +60,7 @@ const MetadataViewControlNet = ({
     if (!handlers.renderItemValue) {
       return null;
     }
-    return handlers.renderItemValue(controlNet);
+    return <Text>{handlers.renderItemValue(controlNet)}</Text>;
   }, [handlers, controlNet]);
 
   return <MetadataItemView label={label} isDisabled={false} onRecall={onRecall} renderedValue={renderedValue} />;
diff --git a/invokeai/frontend/web/src/features/metadata/components/MetadataIPAdapters.tsx b/invokeai/frontend/web/src/features/metadata/components/MetadataIPAdapters.tsx
index fef281cd09..6a40d24837 100644
--- a/invokeai/frontend/web/src/features/metadata/components/MetadataIPAdapters.tsx
+++ b/invokeai/frontend/web/src/features/metadata/components/MetadataIPAdapters.tsx
@@ -1,3 +1,4 @@
+import { Text } from '@invoke-ai/ui-library';
 import type { IPAdapterConfig } from 'features/controlAdapters/store/types';
 import { MetadataItemView } from 'features/metadata/components/MetadataItemView';
 import type { MetadataHandlers } from 'features/metadata/types';
@@ -59,7 +60,7 @@ const MetadataViewIPAdapter = ({
     if (!handlers.renderItemValue) {
       return null;
     }
-    return handlers.renderItemValue(ipAdapter);
+    return <Text>{handlers.renderItemValue(ipAdapter)}</Text>;
   }, [handlers, ipAdapter]);
 
   return <MetadataItemView label={label} isDisabled={false} onRecall={onRecall} renderedValue={renderedValue} />;
diff --git a/invokeai/frontend/web/src/features/metadata/components/MetadataT2IAdapters.tsx b/invokeai/frontend/web/src/features/metadata/components/MetadataT2IAdapters.tsx
index 4a73fb3ccb..a6b741a917 100644
--- a/invokeai/frontend/web/src/features/metadata/components/MetadataT2IAdapters.tsx
+++ b/invokeai/frontend/web/src/features/metadata/components/MetadataT2IAdapters.tsx
@@ -1,3 +1,4 @@
+import { Text } from '@invoke-ai/ui-library';
 import type { T2IAdapterConfig } from 'features/controlAdapters/store/types';
 import { MetadataItemView } from 'features/metadata/components/MetadataItemView';
 import type { MetadataHandlers } from 'features/metadata/types';
@@ -59,7 +60,7 @@ const MetadataViewT2IAdapter = ({
     if (!handlers.renderItemValue) {
       return null;
     }
-    return handlers.renderItemValue(t2iAdapter);
+    return <Text>{handlers.renderItemValue(t2iAdapter)}</Text>;
   }, [handlers, t2iAdapter]);
 
   return <MetadataItemView label={label} isDisabled={false} onRecall={onRecall} renderedValue={renderedValue} />;
diff --git a/invokeai/frontend/web/src/features/metadata/util/handlers.tsx b/invokeai/frontend/web/src/features/metadata/util/handlers.ts
similarity index 96%
rename from invokeai/frontend/web/src/features/metadata/util/handlers.tsx
rename to invokeai/frontend/web/src/features/metadata/util/handlers.ts
index 1f86257d42..2c6e9d7c63 100644
--- a/invokeai/frontend/web/src/features/metadata/util/handlers.tsx
+++ b/invokeai/frontend/web/src/features/metadata/util/handlers.ts
@@ -1,6 +1,5 @@
-import { Text } from '@invoke-ai/ui-library';
 import { toast } from 'common/util/toast';
-import type { ControlNetConfig, IPAdapterConfig, T2IAdapterConfig } from 'features/controlAdapters/store/types';
+import type { ControlAdapterConfig } from 'features/controlAdapters/store/types';
 import type { LoRA } from 'features/lora/store/loraSlice';
 import type {
   BuildMetadataHandlers,
@@ -20,10 +19,9 @@ import { recallers } from './recallers';
 
 const renderModelConfigValue: MetadataRenderValueFunc<AnyModelConfig> = (value) =>
   `${value.name} (${value.base.toUpperCase()}, ${value.key})`;
-const renderLoRAValue: MetadataRenderValueFunc<LoRA> = (value) => <Text>{`${value.model.key} (${value.weight})`}</Text>;
-const renderControlAdapterValue: MetadataRenderValueFunc<ControlNetConfig | T2IAdapterConfig | IPAdapterConfig> = (
-  value
-) => <Text>{`${value.model?.key} (${value.weight})`}</Text>;
+const renderLoRAValue: MetadataRenderValueFunc<LoRA> = (value) => `${value.model.key} (${value.weight})`;
+const renderControlAdapterValue: MetadataRenderValueFunc<ControlAdapterConfig> = (value) =>
+  `${value.model?.key} (${value.weight})`;
 
 const parameterSetToast = (parameter: string, description?: string) => {
   toast({