From a6bb7e99572326c4382af3f58412703730171696 Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Wed, 27 Dec 2023 00:19:02 +0200
Subject: [PATCH] fix playlist card

---
 src/components/ResponsiveImage.tsx | 48 ++----------------------------
 src/pages/Home/VideoList.tsx       |  3 ++
 2 files changed, 5 insertions(+), 46 deletions(-)

diff --git a/src/components/ResponsiveImage.tsx b/src/components/ResponsiveImage.tsx
index e806be8..f184f31 100644
--- a/src/components/ResponsiveImage.tsx
+++ b/src/components/ResponsiveImage.tsx
@@ -23,28 +23,12 @@ const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
 
   
 
-  const aspectRatio = (height / width) * 100
-
-
-
-  const imageStyle: CSSProperties = {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover'
-  }
-
-  const wrapperStyle: CSSProperties = {
-    position: 'relative',
-    paddingBottom: `${aspectRatio}%`,
-    overflow: 'hidden',
-    ...style
-  }
-
   return (
     <Box
       sx={{
         padding: '2px',
-        height: '100%'
+        height: '100%',
+        ...style
       }}
     >
    
@@ -76,34 +60,6 @@ const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
       />
     </Box>
   )
-
-  return (
-    <div style={wrapperStyle} className={className}>
-      {loading ? (
-        <Skeleton
-          variant="rectangular"
-          sx={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0
-          }}
-        />
-      ) : (
-        <img
-          src={src}
-          alt={alt}
-          style={{
-            ...imageStyle,
-            position: 'absolute',
-            top: 0,
-            left: 0
-          }}
-        />
-      )}
-    </div>
-  )
 }
 
 export default ResponsiveImage
diff --git a/src/pages/Home/VideoList.tsx b/src/pages/Home/VideoList.tsx
index 4edd294..6f1b6ea 100644
--- a/src/pages/Home/VideoList.tsx
+++ b/src/pages/Home/VideoList.tsx
@@ -606,6 +606,9 @@ export const VideoList = ({ mode }: VideoListProps) => {
                         src={videoObj?.image}
                         width={266}
                         height={150}
+                        style={{
+                          maxHeight: '50%'
+                        }}
                       />
                       <VideoCardTitle>{videoObj?.title}</VideoCardTitle>
                       <BottomParent>