Merge branch 'feed-carousel-fixes' into 'develop'

Set the ref on the actual carousel div

See merge request soapbox-pub/soapbox-fe!1661

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 <div> 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<IHStack> = (props) => {
+const HStack = forwardRef<HTMLDivElement, IHStack>((props, ref) => {
   const { space, alignItems, grow, justifyContent, className, ...filteredProps } = props;
 
   return (
     <div
       {...filteredProps}
+      ref={ref}
       className={classNames('flex', {
         // @ts-ignore
         [alignItemsOptions[alignItems]]: typeof alignItems !== 'undefined',
@@ -60,6 +63,6 @@ const HStack: React.FC<IHStack> = (props) => {
       }, className)}
     />
   );
-};
+});
 
 export default HStack;

app/soapbox/features/feed-filtering/feed-carousel.tsx

@@ -110,7 +110,7 @@ const FeedCarousel = () => {
   }
 
   return (
-    <Card variant='rounded' size='lg' ref={setCardRef} className='relative' data-testid='feed-carousel'>
+    <Card variant='rounded' size='lg' className='relative' data-testid='feed-carousel'>
       <div>
         {hasPrevPage && (
           <div>
@@ -118,7 +118,7 @@ const FeedCarousel = () => {
               <button
                 data-testid='prev-page'
                 onClick={handlePrevPage}
-                className='bg-white/85 backdrop-blur rounded-full h-8 w-8 flex items-center justify-center'
+                className='bg-white/50 dark:bg-gray-900/50 backdrop-blur rounded-full h-8 w-8 flex items-center justify-center'
               >
                 <Icon src={require('@tabler/icons/chevron-left.svg')} className='text-black dark:text-white h-6 w-6' />
               </button>
@@ -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) => (
@@ -154,7 +155,7 @@ const FeedCarousel = () => {
               <button
                 data-testid='next-page'
                 onClick={handleNextPage}
-                className='bg-white/85 backdrop-blur rounded-full h-8 w-8 flex items-center justify-center'
+                className='bg-white/50 dark:bg-gray-900/50 backdrop-blur rounded-full h-8 w-8 flex items-center justify-center'
               >
                 <Icon src={require('@tabler/icons/chevron-right.svg')} className='text-black dark:text-white h-6 w-6' />
               </button>