move inView ref to ImageContainer component

- the separate outer component is unneeded and affects the positioning of some components which rely on the ImageContainer's styling

src/shared/components/image/image.module.css

@@ -32,3 +32,8 @@
     width: 100%;
     height: 100%;
 }
+
+.view-wrapper {
+    width: 100%;
+    height: 100%;
+}

src/shared/components/image/image.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { motion, MotionConfigProps } from 'motion/react';
-import { type ImgHTMLAttributes } from 'react';
+import { ForwardedRef, forwardRef, type ImgHTMLAttributes } from 'react';
 import { Img } from 'react-image';
 import { InView } from 'react-intersection-observer';
 
@@ -50,13 +50,13 @@ export function Image({
         return (
             <InView>
                 {({ inView, ref }) => (
-                    <div ref={ref}>
                     <Img
                         className={clsx(styles.image, className)}
                         container={(children) => (
                             <ImageContainer
                                 className={containerClassName}
                                 enableAnimation={enableAnimation}
+                                ref={ref}
                                 {...imageContainerProps}
                             >
                                 {children}
@@ -78,7 +78,6 @@ export function Image({
                             ) : null
                         }
                     />
-                    </div>
                 )}
             </InView>
         );
@@ -87,10 +86,14 @@ export function Image({
     return <ImageUnloader />;
 }
 
-function ImageContainer({ children, className, enableAnimation, ...props }: ImageContainerProps) {
+const ImageContainer = forwardRef(
+    (
+        { children, className, enableAnimation, ...props }: ImageContainerProps,
+        ref: ForwardedRef<HTMLDivElement>,
+    ) => {
         if (!enableAnimation) {
             return (
-            <div className={clsx(styles.imageContainer, className)} {...props}>
+                <div className={clsx(styles.imageContainer, className)} ref={ref} {...props}>
                     {children}
                 </div>
             );
@@ -99,13 +102,15 @@ function ImageContainer({ children, className, enableAnimation, ...props }: Imag
         return (
             <motion.div
                 className={clsx(styles.imageContainer, className)}
+                ref={ref}
                 {...animationProps.fadeIn}
                 {...props}
             >
                 {children}
             </motion.div>
         );
-}
+    },
+);
 
 function ImageLoader({ className }: ImageLoaderProps) {
     return (
@@ -118,7 +123,7 @@ function ImageLoader({ className }: ImageLoaderProps) {
 function ImageUnloader({ className }: ImageUnloaderProps) {
     return (
         <div className={clsx(styles.unloader, className)}>
-            <Icon icon="emptyImage" size="xl" />
+            <Icon color="default" icon="emptyImage" size="xl" />
         </div>
     );
 }