diff --git a/app/soapbox/components/ui/hstack/hstack.tsx b/app/soapbox/components/ui/hstack/hstack.tsx
index 2a021d903c..f05f991ec0 100644
--- a/app/soapbox/components/ui/hstack/hstack.tsx
+++ b/app/soapbox/components/ui/hstack/hstack.tsx
@@ -1,5 +1,5 @@
import classNames from 'classnames';
-import React from 'react';
+import React, { forwardRef } from 'react';
const justifyContentOptions = {
between: 'justify-between',
@@ -32,6 +32,8 @@ interface IHStack {
alignItems?: 'top' | 'bottom' | 'center' | 'start',
/** Extra class names on the
element. */
className?: string,
+ /** Children */
+ children?: React.ReactNode,
/** Horizontal alignment of children. */
justifyContent?: 'between' | 'center' | 'start' | 'end' | 'around',
/** Size of the gap between elements. */
@@ -43,12 +45,13 @@ interface IHStack {
}
/** Horizontal row of child elements. */
-const HStack: React.FC
= (props) => {
+const HStack = forwardRef((props, ref) => {
const { space, alignItems, grow, justifyContent, className, ...filteredProps } = props;
return (
= (props) => {
}, className)}
/>
);
-};
+});
export default HStack;
diff --git a/app/soapbox/features/feed-filtering/feed-carousel.tsx b/app/soapbox/features/feed-filtering/feed-carousel.tsx
index 8eebbda6d1..5876bfd532 100644
--- a/app/soapbox/features/feed-filtering/feed-carousel.tsx
+++ b/app/soapbox/features/feed-filtering/feed-carousel.tsx
@@ -110,7 +110,7 @@ const FeedCarousel = () => {
}
return (
-
+
{hasPrevPage && (
@@ -131,6 +131,7 @@ const FeedCarousel = () => {
space={8}
className='z-0 flex transition-all duration-200 ease-linear scroll'
style={{ transform: `translateX(-${(currentPage - 1) * 100}%)` }}
+ ref={setCardRef}
>
{isLoading ? (
new Array(pageSize).fill(0).map((_, idx) => (