From 18f4f3689dbb81184622a6c9b27c32004c910fb3 Mon Sep 17 00:00:00 2001
From: Rajveer Singh <rajveergreets@gmail.com>
Date: Thu, 12 Dec 2024 01:25:36 +0530
Subject: [PATCH] fix: iframe-video positioning and width fixes along with some
 accordion styling fixes  (#1625)

* fix: iframe-video positioning and width

* fix: increased sidebar padding-bottom to ensure the last accordion is visible, and centered accordion text for smaller screen sizes

* fixed position and alignment of filter button

* minor fix: removed the unnessary ugly looking borders around show contents button

* Resolved logo and search icon overlap in the navbar on small mobile devices
---
 src/app/courses/[courseId]/layout.tsx | 4 ++--
 src/components/AppxVideoPlayer.tsx    | 2 +-
 src/components/Navbar.tsx             | 2 +-
 src/components/Sidebar.tsx            | 4 ++--
 src/components/VideoPlayerSegment.tsx | 2 +-
 src/components/ui/accordion.tsx       | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/courses/[courseId]/layout.tsx b/src/app/courses/[courseId]/layout.tsx
index df922375a..827af309b 100644
--- a/src/app/courses/[courseId]/layout.tsx
+++ b/src/app/courses/[courseId]/layout.tsx
@@ -49,11 +49,11 @@ const Layout = async ({
   const fullCourseContent = await getFullCourseContent(parseInt(courseId, 10));
   return (
     <div className="relative flex min-h-screen flex-col py-24">
-      <div className="flex justify-between">
+      <div className="flex justify-between items-center">
         <div className="2/3">
           <Sidebar fullCourseContent={fullCourseContent} courseId={courseId} />
         </div>
-        <div className="w-1/3">
+        <div>
           <FilterContent />
         </div>
       </div>
diff --git a/src/components/AppxVideoPlayer.tsx b/src/components/AppxVideoPlayer.tsx
index 33158780e..5e24f0686 100644
--- a/src/components/AppxVideoPlayer.tsx
+++ b/src/components/AppxVideoPlayer.tsx
@@ -38,7 +38,7 @@ export const AppxVideoPlayer = ({
   }
   return <iframe
     src={url}
-    className="h-[80vh] w-[80vw] rounded-lg"
+    className="w-full rounded-lg aspect-video"
     allowFullScreen
   ></iframe >;
 };
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 052a855c5..14e7375b5 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -80,7 +80,7 @@ export const Navbar = () => {
                 className="size-10 rounded-full"
               />
               <p
-                className={`hidden bg-gradient-to-b from-blue-400 to-blue-700 bg-clip-text text-2xl font-black tracking-tighter text-transparent min-[375px]:block`}
+                className={`hidden bg-gradient-to-b from-blue-400 to-blue-700 bg-clip-text text-2xl font-black tracking-tighter text-transparent min-[410px]:block`}
               >
                 100xDevs
               </p>
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index fa94b2f7f..2ac87ec8e 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -234,7 +234,7 @@ export function Sidebar({
   );
 
   return (
-    <div className="sticky top-[72px] z-20 bg-background py-2">
+    <div className="sticky top-[72px] z-20 py-2">
       <Button
         ref={buttonRef}
         onClick={() => setSidebarOpen((s) => !s)}
@@ -274,7 +274,7 @@ export function Sidebar({
             <Accordion
               type="multiple"
               defaultValue={currentActiveContentIds.map((num) => `item-${num}`)}
-              className="w-full px-4 pb-24 capitalize"
+              className="w-full px-4 pb-40 capitalize"
             >
               {memoizedContent}
             </Accordion>
diff --git a/src/components/VideoPlayerSegment.tsx b/src/components/VideoPlayerSegment.tsx
index e546a5d6b..da2870caa 100644
--- a/src/components/VideoPlayerSegment.tsx
+++ b/src/components/VideoPlayerSegment.tsx
@@ -98,7 +98,7 @@ export const VideoPlayerSegment: FunctionComponent<VideoProps> = ({
         <div
           id="thumbnail-preview"
           ref={thumbnailPreviewRef}
-          className="pointer-events-none absolute z-10 hidden h-[180px] w-[320px] bg-cover bg-no-repeat"
+          className="pointer-events-none absolute z-10 hidden h-full w-full bg-cover bg-no-repeat"
         />
         <VideoPlayer
           setQuality={setQuality}
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
index 3c59fd223..a3ac0868b 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -28,7 +28,7 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        'flex flex-1 items-center justify-between py-4 transition-all [&[data-state=open]>svg]:rotate-180',
+        'flex flex-1 items-center justify-between py-4 transition-all [&[data-state=open]>svg]:rotate-180 text-start',
         className,
       )}
       {...props}