Topic: Messages: Invalid size for null key/value messages
If key/value is absent the size is always 4 bytes.
<img width="1135" alt="image" src="https://user-images.githubusercontent.com/1494347/233128171-30311e14-bd9a-4d0c-8002-dafbaeaebbea.png">

kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx
index 0282cde2ea7..fb4e258cca5 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx
@@ -29,8 +29,10 @@ const Message: React.FC<Props> = ({
     timestampType,
     offset,
     key,
+    keySize,
     partition,
     content,
+    valueSize,
     headers,
     valueSerde,
     keySerde,
@@ -138,6 +140,8 @@ const Message: React.FC<Props> = ({
           headers={headers}
           timestamp={timestamp}
           timestampType={timestampType}
+          keySize={keySize}
+          contentSize={valueSize}
         />
       )}
     </>
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
index fe472ad3b12..93616ca432a 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
@@ -15,6 +15,8 @@ export interface MessageContentProps {
   headers?: { [key: string]: string | undefined };
   timestamp?: Date;
   timestampType?: TopicMessageTimestampTypeEnum;
+  keySize?: number;
+  contentSize?: number;
 }
 
 const MessageContent: React.FC<MessageContentProps> = ({
@@ -23,6 +25,8 @@ const MessageContent: React.FC<MessageContentProps> = ({
   headers,
   timestamp,
   timestampType,
+  keySize,
+  contentSize,
 }) => {
   const [activeTab, setActiveTab] = React.useState<Tab>('content');
   const [searchParams] = useSearchParams();
@@ -54,8 +58,7 @@ const MessageContent: React.FC<MessageContentProps> = ({
     e.preventDefault();
     setActiveTab('headers');
   };
-  const keySize = new TextEncoder().encode(messageKey).length;
-  const contentSize = new TextEncoder().encode(messageContent).length;
+
   const contentType =
     messageContent && messageContent.trim().startsWith('{')
       ? SchemaType.JSON
