From b401af2950c891170110317cfcd35f75a75591c8 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 15:59:36 -0500
Subject: [PATCH] Streamfield: don't render values container unless it has
 values

---
 .../components/ui/streamfield/streamfield.tsx | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/app/soapbox/components/ui/streamfield/streamfield.tsx b/app/soapbox/components/ui/streamfield/streamfield.tsx
index 48e8d43ba..902ae2873 100644
--- a/app/soapbox/components/ui/streamfield/streamfield.tsx
+++ b/app/soapbox/components/ui/streamfield/streamfield.tsx
@@ -65,22 +65,24 @@ const Streamfield: React.FC<IStreamfield> = ({
         {hint && <Text size='xs' theme='muted'>{hint}</Text>}
       </Stack>
 
-      <Stack>
-        {values.map((value, i) => (
-          <HStack space={2} alignItems='center'>
-            <Component key={i} onChange={handleChange(i)} value={value} />
-            {onRemoveItem && (
-              <IconButton
-                iconClassName='w-4 h-4'
-                className='bg-transparent text-gray-400 hover:text-gray-600'
-                src={require('@tabler/icons/icons/x.svg')}
-                onClick={() => onRemoveItem(i)}
-                title={intl.formatMessage(messages.remove)}
-              />
-            )}
-          </HStack>
-        ))}
-      </Stack>
+      {(values.length > 0) && (
+        <Stack>
+          {values.map((value, i) => (
+            <HStack space={2} alignItems='center'>
+              <Component key={i} onChange={handleChange(i)} value={value} />
+              {onRemoveItem && (
+                <IconButton
+                  iconClassName='w-4 h-4'
+                  className='bg-transparent text-gray-400 hover:text-gray-600'
+                  src={require('@tabler/icons/icons/x.svg')}
+                  onClick={() => onRemoveItem(i)}
+                  title={intl.formatMessage(messages.remove)}
+                />
+              )}
+            </HStack>
+          ))}
+        </Stack>
+      )}
 
       {onAddItem && (
         <Button