From af87fdbcb6df31e1871cf07a68397c650785b9d9 Mon Sep 17 00:00:00 2001
From: tom <tom@ohhhh.me>
Date: Thu, 14 Mar 2024 11:22:13 +0400
Subject: [PATCH] blob: don't break words for UTF-8 decoding

---
 ui/blob/BlobData.tsx         | 2 +-
 ui/shared/RawDataSnippet.tsx | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/blob/BlobData.tsx b/ui/blob/BlobData.tsx
index c8c3996d5a..cb6a32dc34 100644
--- a/ui/blob/BlobData.tsx
+++ b/ui/blob/BlobData.tsx
@@ -86,7 +86,7 @@ const BlobData = ({ data, isLoading, hash }: Props) => {
         return <BlobDataImage src={ imgSrc }/>;
       }
       case 'UTF-8':
-        return <RawDataSnippet data={ hexToUtf8(data) } showCopy={ false } isLoading={ isLoading }/>;
+        return <RawDataSnippet data={ hexToUtf8(data) } showCopy={ false } isLoading={ isLoading } contentProps={{ wordBreak: 'break-word' }}/>;
       case 'Base64':
         return <RawDataSnippet data={ hexToBase64(data) } showCopy={ false } isLoading={ isLoading }/>;
       case 'Raw':
diff --git a/ui/shared/RawDataSnippet.tsx b/ui/shared/RawDataSnippet.tsx
index 3350212584..b18a6009f8 100644
--- a/ui/shared/RawDataSnippet.tsx
+++ b/ui/shared/RawDataSnippet.tsx
@@ -1,3 +1,4 @@
+import type { ChakraProps } from '@chakra-ui/react';
 import { Box, Flex, chakra, useColorModeValue, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
@@ -12,9 +13,10 @@ interface Props {
   textareaMaxHeight?: string;
   showCopy?: boolean;
   isLoading?: boolean;
+  contentProps?: ChakraProps;
 }
 
-const RawDataSnippet = ({ data, className, title, rightSlot, beforeSlot, textareaMaxHeight, showCopy = true, isLoading }: Props) => {
+const RawDataSnippet = ({ data, className, title, rightSlot, beforeSlot, textareaMaxHeight, showCopy = true, isLoading, contentProps }: Props) => {
   // see issue in theme/components/Textarea.ts
   const bgColor = useColorModeValue('#f5f5f6', '#1a1b1b');
   return (
@@ -39,6 +41,7 @@ const RawDataSnippet = ({ data, className, title, rightSlot, beforeSlot, textare
         overflowX="hidden"
         overflowY="auto"
         isLoaded={ !isLoading }
+        { ...contentProps }
       >
         { data }
       </Skeleton>