From e9812ff10b334fa159c5b3bcd021a8cf737dc7a3 Mon Sep 17 00:00:00 2001
From: Rava Maulana <ravamaulana14@gmail.com>
Date: Fri, 17 Nov 2023 14:55:18 +0700
Subject: [PATCH] fix: attempted responsive
---
src/components/EpisodeList.tsx | 2 +-
src/components/PodcastHeader.tsx | 8 +++++---
src/pages/podcast/index.tsx | 6 +++---
3 files changed, 9 insertions(+), 7 deletions(-)
diff --git a/src/components/EpisodeList.tsx b/src/components/EpisodeList.tsx
index d54493a..fae0887 100644
--- a/src/components/EpisodeList.tsx
+++ b/src/components/EpisodeList.tsx
@@ -100,7 +100,7 @@ export default function EpisodeList({
return (
<div
onClick={handleNavigate}
- className="cursor-pointer group/item flex items-center w-[1100px] h-[110px] rounded-xl bg-white hover:bg-NAVY-5 text-black hover:text-white"
+ className="cursor-pointer group/item flex items-center w-full h-[110px] rounded-xl bg-white hover:bg-NAVY-5 text-black hover:text-white"
>
<h1 className="h2 ml-[30px] mr-[20px]">{order}</h1>
<img
diff --git a/src/components/PodcastHeader.tsx b/src/components/PodcastHeader.tsx
index a1aaa48..aaac5b0 100644
--- a/src/components/PodcastHeader.tsx
+++ b/src/components/PodcastHeader.tsx
@@ -32,7 +32,7 @@ export default function PodcastHeader({
const queue = useQueue();
const dispatchQueue = useQueueDispatch();
// const [libraryData, setLibraryData] = useState<cardProps[]>([]);
-
+
// useEffect(() => {
// (async () => {
// const resLibaryData = await axios.get(
@@ -99,7 +99,7 @@ export default function PodcastHeader({
return (
<div className="block">
- <div className="w-[950px] inline-flex mt-[20px]">
+ <div className="w-full inline-flex mt-[20px]">
<div className="">
<div className="w-[225px] h-[225px]">
<img
@@ -128,7 +128,9 @@ export default function PodcastHeader({
</div>
<div className="block">
- <p className="b3 text-gray-600 ">{description}</p>
+ <p className="b3 text-gray-600 md:max-xl:text-[12px]">
+ {description}
+ </p>
</div>
</div>
</div>
diff --git a/src/pages/podcast/index.tsx b/src/pages/podcast/index.tsx
index d523b89..9cbf971 100644
--- a/src/pages/podcast/index.tsx
+++ b/src/pages/podcast/index.tsx
@@ -30,7 +30,7 @@ export default function PodcastPage(): JSX.Element {
import.meta.env.VITE_REST_URL
}/podcast/${podcastId}?premium=${searchParams.get("premium")}`
);
- if(!resPodcast.data.podcast) {
+ if (!resPodcast.data.podcast) {
navigate(`/`);
}
setPodcastHeader(resPodcast.data.podcast);
@@ -39,7 +39,7 @@ export default function PodcastPage(): JSX.Element {
}, [podcastId, searchParams, navigate]);
return (
- <div className="ml-[100px]">
+ <div className="ml-[32px] xl:ml-[100px]">
{podcastHeader ? (
<PodcastHeader
{...podcastHeader}
@@ -52,7 +52,7 @@ export default function PodcastPage(): JSX.Element {
<hr className="h-px mt-[30px] ml-[-100px] bg-black bg-opacity-40" />
</div>
- <section className="mt-[20px] overflow-y-scroll h-[60vh] mb-[60px]">
+ <section className="mt-[20px] overflow-y-scroll h-[60vh] pb-[60px] ml-[-16px] xl:ml-0">
{episodes?.map((episode: episodeProps, idx: number) => (
<Episode
key={idx}
--
GitLab