From 52585cef7cf26bd026fa2e6743ade392d0a71b2f Mon Sep 17 00:00:00 2001
From: Julin <142230457+c-julin@users.noreply.github.com>
Date: Thu, 28 May 2026 11:32:00 +0100
Subject: [PATCH 1/3] 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.
---
 .../components/pages/topics/quick-info.tsx    | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/pages/topics/quick-info.tsx b/frontend/src/components/pages/topics/quick-info.tsx
index b77ad577de..4fada63605 100644
--- a/frontend/src/components/pages/topics/quick-info.tsx
+++ b/frontend/src/components/pages/topics/quick-info.tsx
@@ -119,27 +119,28 @@ 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">~{formatConfigValue(retentionMs.name, retentionMs.value, 'friendly')}</Text>
+            </Flex>
+            <Box>
+              <Divider orientation="vertical" />
+            </Box>
+            <Flex gap={2}>
+              <Text as="dt" fontWeight="bold">
+                Retention Size:
+              </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'}
-                  </>
-                )}
+                ~{formatConfigValue(retentionBytes.name, retentionBytes.value, 'friendly')}
+                {Number.isFinite(Number(retentionBytes.value)) &&
+                  Number(retentionBytes.value) !== -1 &&
+                  ' / partition'}
               </Text>
-            ) : null}
+            </Flex>
           </>
         )}
       </Flex>

From 76eb8b100a69739666b9742c73da0ea9b200a182 Mon Sep 17 00:00:00 2001
From: Julin <142230457+c-julin@users.noreply.github.com>
Date: Thu, 28 May 2026 11:40:34 +0100
Subject: [PATCH 2/3] fix(topics): drop tilde prefix when retention is infinite

---
 frontend/src/components/pages/topics/quick-info.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/pages/topics/quick-info.tsx b/frontend/src/components/pages/topics/quick-info.tsx
index 4fada63605..a445f491fe 100644
--- a/frontend/src/components/pages/topics/quick-info.tsx
+++ b/frontend/src/components/pages/topics/quick-info.tsx
@@ -125,7 +125,10 @@ export const TopicQuickInfoStatistic = (p: { topic: Topic }) => {
               <Text as="dt" fontWeight="bold">
                 Retention Time:
               </Text>
-              <Text as="dd">~{formatConfigValue(retentionMs.name, retentionMs.value, 'friendly')}</Text>
+              <Text as="dd">
+                {retentionMs.value !== '-1' && '~'}
+                {formatConfigValue(retentionMs.name, retentionMs.value, 'friendly')}
+              </Text>
             </Flex>
             <Box>
               <Divider orientation="vertical" />
@@ -135,7 +138,8 @@ export const TopicQuickInfoStatistic = (p: { topic: Topic }) => {
                 Retention Size:
               </Text>
               <Text as="dd">
-                ~{formatConfigValue(retentionBytes.name, retentionBytes.value, 'friendly')}
+                {retentionBytes.value !== '-1' && '~'}
+                {formatConfigValue(retentionBytes.name, retentionBytes.value, 'friendly')}
                 {Number.isFinite(Number(retentionBytes.value)) &&
                   Number(retentionBytes.value) !== -1 &&
                   ' / partition'}

From 95e6d31a3e82658ac03c26817ea78e0abeff103b Mon Sep 17 00:00:00 2001
From: Julin <142230457+c-julin@users.noreply.github.com>
Date: Thu, 28 May 2026 12:14:47 +0100
Subject: [PATCH 3/3] style(topics): apply ultracite formatting

---
 frontend/src/components/pages/topics/quick-info.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/components/pages/topics/quick-info.tsx b/frontend/src/components/pages/topics/quick-info.tsx
index a445f491fe..896ec8e45c 100644
--- a/frontend/src/components/pages/topics/quick-info.tsx
+++ b/frontend/src/components/pages/topics/quick-info.tsx
@@ -140,9 +140,7 @@ export const TopicQuickInfoStatistic = (p: { topic: Topic }) => {
               <Text as="dd">
                 {retentionBytes.value !== '-1' && '~'}
                 {formatConfigValue(retentionBytes.name, retentionBytes.value, 'friendly')}
-                {Number.isFinite(Number(retentionBytes.value)) &&
-                  Number(retentionBytes.value) !== -1 &&
-                  ' / partition'}
+                {Number.isFinite(Number(retentionBytes.value)) && Number(retentionBytes.value) !== -1 && ' / partition'}
               </Text>
             </Flex>
           </>