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) => (