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

Author: rajveeerr

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>

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 >;
 };

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>

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>

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}

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}