frontend(topics): split retention into Retention Time and Retention Size (UX-1310) (#2471)

* frontend(topics): split retention into Retention Time and Retention Size (UX-1310)

The topic quick-info bar joined retention.ms and retention.bytes with
"or", producing ambiguous strings like "1 day or Infinite" when only
one metric was set to -1. Splits the field into two clearly labelled
columns ("Retention Time" / "Retention Size") that always render, so
an Infinite value reads unambiguously.

* fix(topics): drop tilde prefix when retention is infinite

* style(topics): apply ultracite formatting

Author: c-julin

frontend/src/components/pages/topics/quick-info.tsx

@@ -119,27 +119,30 @@ export const TopicQuickInfoStatistic = (p: { topic: Topic }) => {
           </>
         )}
 
-        {cleanupPolicy === 'delete' && (
+        {cleanupPolicy === 'delete' && retentionMs && retentionBytes && (
           <>
-            <Text as="dt" fontWeight="bold">
-              Retention:
-            </Text>
-            {retentionMs && retentionBytes ? (
+            <Flex gap={2}>
+              <Text as="dt" fontWeight="bold">
+                Retention Time:
+              </Text>
               <Text as="dd">
-                ~
-                {retentionMs.value === '-1' && retentionBytes.value === '-1' ? (
-                  'Unlimited'
-                ) : (
-                  <>
-                    {formatConfigValue(retentionMs.name, retentionMs.value, 'friendly')} or{' '}
-                    {formatConfigValue(retentionBytes.name, retentionBytes.value, 'friendly')}
-                    {Number.isFinite(Number(retentionBytes.value)) &&
-                      Number(retentionBytes.value) !== -1 &&
-                      ' / partition'}
-                  </>
-                )}
+                {retentionMs.value !== '-1' && '~'}
+                {formatConfigValue(retentionMs.name, retentionMs.value, 'friendly')}
               </Text>
-            ) : null}
+            </Flex>
+            <Box>
+              <Divider orientation="vertical" />
+            </Box>
+            <Flex gap={2}>
+              <Text as="dt" fontWeight="bold">
+                Retention Size:
+              </Text>
+              <Text as="dd">
+                {retentionBytes.value !== '-1' && '~'}
+                {formatConfigValue(retentionBytes.name, retentionBytes.value, 'friendly')}
+                {Number.isFinite(Number(retentionBytes.value)) && Number(retentionBytes.value) !== -1 && ' / partition'}
+              </Text>
+            </Flex>
           </>
         )}
       </Flex>