...

src/components/SearchFeed.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Typography, Box } from "@mui/material";
 import { useParams } from "react-router-dom";
 

src/components/VideoCard.jsx

@@ -6,9 +6,11 @@ import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import { demoThumbnailUrl, demoVideoUrl, demoVideoTitle, demoChannelUrl, demoChannelTitle } from "../utils/constants";
 
 const VideoCard = ({ video: { id: { videoId }, snippet } }) => (
-  <Card sx={{ width: { md: "320px", xs: "100%" }, boxShadow: "none", borderRadius: 0 }}>
+  <Card sx={{ width: { xs: '100%', sm: '358px', md: "320px", }, boxShadow: "none", borderRadius: 0 }}>
     <Link to={videoId ? `/video/${videoId}` : `/video/cV2gBU6hKfY` }>
-      <CardMedia image={snippet?.thumbnails?.high?.url || demoThumbnailUrl} alt={snippet?.title} sx={{ width: 358, height: 180 }} />
+      <CardMedia image={snippet?.thumbnails?.high?.url || demoThumbnailUrl} alt={snippet?.title} 
+        sx={{ width: { xs: '100%', sm: '358px'}, height: 180 }} 
+      />
     </Link>
     <CardContent sx={{ backgroundColor: "#1E1E1E", height: '106px' }}>
       <Link to={videoId ? `/video/${videoId}` : demoVideoUrl } >

src/components/VideoDetail.jsx

@@ -13,15 +13,11 @@ const VideoDetail = () => {
   const { id } = useParams();
 
   useEffect(() => {
-    const fetchResults = async () => {
-      const data = await fetchFromAPI(`videos?part=snippet,statistics&id=${id}`);
-      setVideoDetail(data.items[0]);
+    fetchFromAPI(`videos?part=snippet,statistics&id=${id}`)
+      .then((data) => setVideoDetail(data.items[0]))
 
-      const videosData = await fetchFromAPI(`search?part=snippet&relatedToVideoId=${id}&type=video`);
-      setVideos(videosData.items);
-    };
-
-    fetchResults();
+    fetchFromAPI(`search?part=snippet&relatedToVideoId=${id}&type=video`)
+      .then((data) => setVideos(data.items))
   }, [id]);
 
   if(!videoDetail?.snippet) return <Loader />;