diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
index 1f2c01172d4..c8d3f576876 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
@@ -1,5 +1,5 @@
 import type { FlexProps } from '@invoke-ai/ui-library';
-import { Box, Flex, IconButton, Tooltip, useShiftModifier } from '@invoke-ai/ui-library';
+import { Box, chakra, Flex, IconButton, Tooltip, useShiftModifier } from '@invoke-ai/ui-library';
 import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import { useClipboard } from 'common/hooks/useClipboard';
 import { Formatter } from 'fracturedjsonjs';
@@ -26,6 +26,8 @@ const overlayscrollbarsOptions = getOverlayScrollbarsParams({
   overflowY: 'scroll',
 }).options;
 
+const ChakraPre = chakra('pre');
+
 const DataViewer = (props: Props) => {
   const { label, data, fileName, withDownload = true, withCopy = true, extraCopyActions, ...rest } = props;
   const dataString = useMemo(() => (isString(data) ? data : formatter.Serialize(data)) ?? '', [data]);
@@ -51,7 +53,7 @@ const DataViewer = (props: Props) => {
     <Flex bg="base.800" borderRadius="base" flexGrow={1} w="full" h="full" position="relative" {...rest}>
       <Box position="absolute" top={0} left={0} right={0} bottom={0} overflow="auto" p={2} fontSize="sm">
         <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayscrollbarsOptions}>
-          <pre>{dataString}</pre>
+          <ChakraPre whiteSpace="pre-wrap">{dataString}</ChakraPre>
         </OverlayScrollbarsComponent>
       </Box>
       <Flex position="absolute" top={0} insetInlineEnd={0} p={2}>