diff --git a/app/soapbox/components/ui/hstack/hstack.tsx b/app/soapbox/components/ui/hstack/hstack.tsx
index 9769ebc60..2a021d903 100644
--- a/app/soapbox/components/ui/hstack/hstack.tsx
+++ b/app/soapbox/components/ui/hstack/hstack.tsx
@@ -6,6 +6,7 @@ const justifyContentOptions = {
center: 'justify-center',
start: 'justify-start',
end: 'justify-end',
+ around: 'justify-around',
};
const alignItemsOptions = {
@@ -32,7 +33,7 @@ interface IHStack {
/** Extra class names on the
element. */
className?: string,
/** Horizontal alignment of children. */
- justifyContent?: 'between' | 'center' | 'start' | 'end',
+ justifyContent?: 'between' | 'center' | 'start' | 'end' | 'around',
/** Size of the gap between elements. */
space?: 0.5 | 1 | 1.5 | 2 | 3 | 4 | 6 | 8,
/** Whether to let the flexbox grow. */
diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx
index 17b4df36e..9ecb4a104 100644
--- a/app/soapbox/components/ui/stack/stack.tsx
+++ b/app/soapbox/components/ui/stack/stack.tsx
@@ -4,6 +4,7 @@ import React from 'react';
type SIZES = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10
const spaces = {
+ 0: 'space-y-0',
'0.5': 'space-y-0.5',
1: 'space-y-1',
'1.5': 'space-y-1.5',