From e5e670102121290d74cfb297c2842f18ca9a7a20 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@yahoo.com>
Date: Mon, 14 Oct 2024 15:20:35 -0500
Subject: [PATCH] Fixed thumbnail mobile styling

---
 .../carousels/templates/CourseTemplate.js     | 32 ++++++++---------
 .../carousels/templates/DocumentTemplate.js   | 36 +++++++++----------
 .../carousels/templates/VideoTemplate.js      | 34 +++++++++---------
 3 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js
index d920007..80c95a7 100644
--- a/src/components/content/carousels/templates/CourseTemplate.js
+++ b/src/components/content/carousels/templates/CourseTemplate.js
@@ -62,7 +62,7 @@ export function CourseTemplate({ course }) {
         style={{ paddingBottom: "56.25%" }}
       >
         <Image
-          alt="course thumbnail"
+          alt="video thumbnail"
           src={returnImageProxy(course.image)}
           quality={100}
           layout="fill"
@@ -70,14 +70,14 @@ export function CourseTemplate({ course }) {
           className="rounded-md"
         />
         <div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary-foreground/50" />
-        <div className="absolute top-4 right-4 flex items-center gap-1 bg-black/50 text-white px-2 py-1 rounded-full z-10">
+        <div className="absolute top-4 right-4 flex items-center gap-1 bg-black/50 text-white px-3 py-1 rounded-full">
           <ZapDisplay zapAmount={zapAmount} event={course} zapsLoading={zapsLoading && zapAmount === 0} />
         </div>
         <CardHeader className="absolute bottom-[-8px] left-0 right-0 text-white bg-gray-800/70 w-fit rounded-lg rounded-bl-none rounded-tl-none rounded-br-none p-4 max-w-[70%] max-h-[60%]">
           <div className="flex items-center justify-center gap-4">
             <i className="pi pi-book text-2xl text-[#f8f8ff]"></i>
             <div>
-              <CardTitle className="text-2xl sm:text-3xl mb-2">{course.name || course.title}</CardTitle>
+              <CardTitle className="text-2xl sm:text-3xl mb-2">{course.title}</CardTitle>
             </div>
           </div>
         </CardHeader>
@@ -90,19 +90,8 @@ export function CourseTemplate({ course }) {
             </Tag>
           ))}
         </div>
-        <p className="font-bold text-gray-300">{lessonCount} {lessonCount === 1 ? "lesson" : "lessons"}</p>
-      </CardContent>
-      <CardDescription className={`${isMobile ? "p-3" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
-        style={{
-          overflow: "hidden",
-          display: "-webkit-box",
-          WebkitBoxOrient: "vertical",
-          WebkitLineClamp: "2"
-        }}>
-        <div className="w-full flex flex-row justify-between items-start">
-          <p className="line-clamp-2 text-wrap break-words">{(course.summary || course.description)?.split('\n').map((line, index) => (
-            <span className="text-wrap break-words" key={index}>{line}</span>
-          ))}</p>
+        <div className="flex flex-col items-end">
+          <p className="font-bold text-gray-300">{lessonCount} {lessonCount === 1 ? "lesson" : "lessons"}</p>
           <div className="flex flex-col items-end">
             {
               course?.price && course?.price > 0 ? (
@@ -113,6 +102,17 @@ export function CourseTemplate({ course }) {
             }
           </div>
         </div>
+      </CardContent>
+      <CardDescription className={`${isMobile ? "w-full p-3" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
+                style={{
+                    overflow: "hidden",
+                    display: "-webkit-box",
+                    WebkitBoxOrient: "vertical",
+                    WebkitLineClamp: "2"
+                }}>
+        <p className="line-clamp-2 text-wrap break-words">{(course.summary || course.description)?.split('\n').map((line, index) => (
+          <span className="text-wrap break-words" key={index}>{line}</span>
+        ))}</p>
       </CardDescription>
       <CardFooter className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-t border-gray-700 pt-4 ${isMobile ? "px-3" : ""}`}>
         <p className="text-sm text-gray-300">{course?.published_at && course.published_at !== "" ? (
diff --git a/src/components/content/carousels/templates/DocumentTemplate.js b/src/components/content/carousels/templates/DocumentTemplate.js
index 6e3153a..804acbb 100644
--- a/src/components/content/carousels/templates/DocumentTemplate.js
+++ b/src/components/content/carousels/templates/DocumentTemplate.js
@@ -45,7 +45,7 @@ export function DocumentTemplate({ document }) {
     if (zapsError) return <div>Error: {zapsError}</div>;
 
     return (
-        <Card className="w-full overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none">
+        <Card className="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none">
             <div
                 className="relative w-full h-0"
                 style={{ paddingBottom: "56.25%" }}
@@ -79,29 +79,29 @@ export function DocumentTemplate({ document }) {
                         </Tag>
                     ))}
                 </div>
-                <p className="font-bold text-gray-300">{document?.readTime || "5min"} read</p>
+                <div className="flex flex-col items-end">
+                    <p className="font-bold text-gray-300">{document?.readTime || "5 min"} read</p>
+                    <div className="flex flex-col items-end">
+                        {
+                            document?.price && document?.price > 0 ? (
+                                <Message className={`${isMobile ? "text-xs" : "text-base"} py-1 whitespace-nowrap`} icon="pi pi-lock" severity="info" text={`${document.price} sats`} />
+                            ) : (
+                                <Message className={`${isMobile ? "text-xs" : "text-base"} py-1 whitespace-nowrap`} icon="pi pi-lock-open" severity="success" text="Free" />
+                            )
+                        }
+                    </div>
+                </div>
             </CardContent>
-            <CardDescription className={`${isMobile ? "p-3" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
+            <CardDescription className={`${isMobile ? "w-full p-3" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
                 style={{
                     overflow: "hidden",
                     display: "-webkit-box",
                     WebkitBoxOrient: "vertical",
                     WebkitLineClamp: "2"
-            }}>
-                <div className="w-full flex flex-row justify-between items-start break-words">
-                    <p className="line-clamp-2 text-wrap break-words overflow-hidden">{(document.summary || document.description)?.split('\n').map((line, index) => (
-                        <span className="text-wrap break-words overflow-hidden" key={index}>{line}</span>
-                    ))}</p>
-                    <div className="flex flex-col items-end">
-                        {
-                            document?.price && document?.price > 0 ? (
-                                <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock" severity="info" text={`${document.price} sats`} />
-                            ) : (
-                                <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock-open" severity="success" text="Free" />
-                            )
-                        }
-                    </div>
-                </div>
+                }}>
+                <p className="line-clamp-2 text-wrap break-words overflow-hidden">{(document.summary || document.description)?.split('\n').map((line, index) => (
+                    <span className="text-wrap break-words overflow-hidden" key={index}>{line}</span>
+                ))}</p>
             </CardDescription>
             <CardFooter className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-t border-gray-700 pt-4 ${isMobile ? "px-3" : ""}`}>
                 <p className="text-sm text-gray-300">{document?.published_at && document.published_at !== "" ? (
diff --git a/src/components/content/carousels/templates/VideoTemplate.js b/src/components/content/carousels/templates/VideoTemplate.js
index 943bc66..e64a16b 100644
--- a/src/components/content/carousels/templates/VideoTemplate.js
+++ b/src/components/content/carousels/templates/VideoTemplate.js
@@ -80,29 +80,29 @@ export function VideoTemplate({ video }) {
                         </Tag>
                     ))}
                 </div>
-                <p className="font-bold text-gray-300">{video?.duration || "5min"} watch</p>
+                <div className="flex flex-col items-end">
+                    <p className="font-bold text-gray-300">{video?.duration || "5 min"} watch</p>
+                    <div className="flex flex-col items-end">
+                        {
+                            video?.price && video?.price > 0 ? (
+                                <Message className={`${isMobile ? "text-xs" : "text-base"} py-1 whitespace-nowrap`} icon="pi pi-lock" severity="info" text={`${video.price} sats`} />
+                            ) : (
+                                <Message className={`${isMobile ? "text-xs" : "text-base"} py-1 whitespace-nowrap`} icon="pi pi-lock-open" severity="success" text="Free" />
+                            )
+                        }
+                    </div>
+                </div>
             </CardContent>
-            <CardDescription className={`${isMobile ? "p-3" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
+            <CardDescription className={`${isMobile ? "w-full p-3" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
                 style={{
                     overflow: "hidden",
                     display: "-webkit-box",
                     WebkitBoxOrient: "vertical",
                     WebkitLineClamp: "2"
-            }}>
-                <div className="w-full flex flex-row justify-between items-start">
-                    <p className="line-clamp-2 text-wrap break-words">{(video.summary || video.description)?.split('\n').map((line, index) => (
-                        <span className="text-wrap break-words" key={index}>{line}</span>
-                    ))}</p>
-                    <div className="flex flex-col items-end">
-                        {
-                            video?.price && video?.price > 0 ? (
-                                <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock" severity="info" text={`${video.price} sats`} />
-                            ) : (
-                                <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock-open" severity="success" text="Free" />
-                            )
-                        }
-                    </div>
-                </div>
+                }}>
+                <p className="line-clamp-2 text-wrap break-words">{(video.summary || video.description)?.split('\n').map((line, index) => (
+                    <span className="text-wrap break-words" key={index}>{line}</span>
+                ))}</p>
             </CardDescription>
             <CardFooter className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-t border-gray-700 pt-4 ${isMobile ? "px-3" : ""}`}>
                 <p className="text-sm text-gray-300">{video?.published_at && video.published_at !== "" ? (