styling fixes, guard against edge cases in course handling, guard against invalid slug in navbar

src/components/content/courses/CombinedLesson.js

@@ -239,7 +239,7 @@ const CombinedLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
         </>
       )}
       <div
-        className={`${isVideo ? 'bg-gray-800/90 rounded-lg p-4 m-4' : 'w-full mx-auto px-4 py-8 -mt-32 relative z-10'}`}
+        className={`${isVideo ? 'bg-gray-800/90 rounded-lg p-4 m-4 max-mob:px-0' : 'w-full mx-auto px-4 py-8 -mt-32 relative z-10'}`}
       >
         <div className={`${!isVideo && 'mb-8 bg-gray-800/70 rounded-lg p-4'}`}>
           <div className="flex flex-row items-center justify-between w-full">

src/components/content/courses/CourseDetails.js

@@ -217,7 +217,7 @@ export default function CourseDetails({
   };
 
   return (
-    <div className="w-full bg-gray-800 p-4 rounded-lg">
+    <div className="w-full bg-gray-800 p-4 max-mob:px-0 rounded-lg">
       <Toast ref={toastRef} />
       <WelcomeModal />
       

src/components/content/courses/MobileCourseDetails.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import Image from 'next/image';
 import { Tag } from 'primereact/tag';
-import { useRouter } from 'next/router';
 import ZapDisplay from '@/components/zaps/ZapDisplay';
 import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
 import { Divider } from 'primereact/divider';
@@ -20,8 +19,6 @@ export default function MobileCourseDetails({
   isCompleted,
   showCompletedTag
 }) {
-  const router = useRouter();
-  
   return (
     <>
       {/* Mobile-specific layout */}
@@ -33,6 +30,9 @@ export default function MobileCourseDetails({
             processedEvent.topics.map((topic, index) => (
               <Tag className="text-white" key={index} value={topic}></Tag>
             ))}
+          {isCompleted && showCompletedTag && (
+            <Tag severity="success" value="Completed" />
+          )}
         </div>
         
         {/* Title and zaps in same row */}

src/components/content/courses/VideoLesson.js

@@ -204,7 +204,7 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted
       <Toast ref={toastRef} />
       {renderContent()}
       <Divider />
-      <div className="bg-gray-800/90 rounded-lg p-4 m-4">
+      <div className="bg-gray-800/90 rounded-lg p-4 m-4 max-mob:px-2">
         <div className="w-full flex flex-col items-start justify-start mt-2 px-2">
           <div className="flex flex-row items-center justify-between w-full">
             <h1 className="text-3xl text-white">{lesson.title}</h1>

src/components/content/videos/VideoDetails.js

@@ -272,7 +272,7 @@ const VideoDetails = ({
     <div className="w-full">
       <Toast ref={toastRef} />
       {renderContent()}
-      <div className="bg-gray-800/90 rounded-lg p-4 m-4 max-mob:m-0 max-tab:m-0 max-mob:rounded-t-none max-tab:rounded-t-none">
+      <div className="bg-gray-800/90 rounded-lg p-4 m-4 max-mob:px-2 max-tab:px-2 max-mob:m-0 max-tab:m-0 max-mob:rounded-t-none max-tab:rounded-t-none">
         <div className={`w-full flex flex-col items-start justify-start mt-2 px-2`}>
           <div className="flex flex-col items-start gap-2 w-full">
             <div className="flex flex-row items-center justify-between gap-2 w-full">

src/components/navbar/Navbar.js

@@ -34,13 +34,16 @@ const Navbar = () => {
       const fetchCourse = async () => {
         try {
           const { slug } = router.query;
+          if (!slug) return;                     // still preparing
+          
+          const slugStr = Array.isArray(slug) ? slug[0] : slug;
           let identifier;
           
-          if (slug.includes('naddr')) {
-            const { data } = nip19.decode(slug);
+          if (slugStr.includes('naddr')) {
+            const { data } = nip19.decode(slugStr);
             identifier = data?.identifier;
           } else {
-            identifier = slug;
+            identifier = slugStr;
           }
           
           if (identifier) {

src/pages/course/[slug]/index.js

@@ -402,10 +402,10 @@ const Course = () => {
   // Render the QA section (empty for now)
   const renderQASection = () => {
     return (
-      <div className="rounded-lg p-8 mt-4 bg-gray-800">
+      <div className="rounded-lg p-8 mt-4 bg-gray-800 max-mob:px-4">
         <h2 className="text-xl font-bold mb-4">Comments</h2>
         {nAddress !== null && isAuthorized ? (
-        <div className="px-4">
+        <div className="px-4 max-mob:px-0">
           <ZapThreadsWrapper
             anchor={nAddress}
             user={nsec || npub || null}
@@ -513,7 +513,7 @@ const Course = () => {
     <>
       <div className="mx-auto px-8 max-mob:px-0 mb-12 mt-4">
         {/* Tab navigation using MenuTab component */}
-        <div className="sticky z-10 bg-transparent border-b border-gray-700/30"
+        <div className="z-10 bg-transparent border-b border-gray-700/30"
              style={{ 
                top: `${navbarHeight}px`,
                height: `${navbarHeight}px`

src/pages/index.js

@@ -191,7 +191,7 @@ export default function Home() {
             className="w-full"
           />
         </div>
-        <div className="w-full px-4">
+        <div className="w-full px-4 max-mob:px-0">
           <CoursesCarousel />
           <VideosCarousel />
           <DocumentsCarousel />