polishing some final styles

src/components/content/courses/CourseDetails.js

@@ -351,7 +351,7 @@ export default function CourseDetails({
           </div>
           
           {/* Right column: Course details */}
-          <div className={`bg-gray-800 rounded-lg h-fit ${isPhone ? 'p-3' : 'p-4'}`}>
+          <div className={`bg-gray-800 rounded-lg h-fit ${isPhone ? 'p-3 pl-0' : 'p-4'}`}>
             <h2 className={`${isPhone ? 'text-lg' : 'text-xl'} font-semibold mb-3 text-white`}>Course Information</h2>
             
             <div className="space-y-4">

src/components/content/courses/CourseHeader.js

@@ -39,7 +39,7 @@ const CourseHeader = ({
             e.stopPropagation();
             router.push('/');
           }}
-          className="mr-2 p-button-rounded p-button-text text-gray-300 hover:text-white"
+          className="mr-4 p-button-rounded p-button-text text-gray-300 hover:text-white"
           rounded={true}
           text={true}
           aria-label="Go back to home"

src/components/content/courses/CourseSidebar.js

@@ -1,7 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { Tag } from 'primereact/tag';
-import { Button } from 'primereact/button';
-import { Sidebar } from 'primereact/sidebar';
 import Image from 'next/image';
 import { useImageProxy } from '@/hooks/useImageProxy';
 import GenericButton from '@/components/buttons/GenericButton';
@@ -109,39 +107,6 @@ const CourseSidebar = ({
     </div>
   );
 
-  // Global toggle button container - only shown if hideToggleButton is false
-  const SidebarToggle = () => {
-    if (visible || hideToggleButton || isMobileView) return null;
-    
-    return (
-      <div 
-        style={{
-          position: 'fixed',
-          right: 0,
-          top: '40%',
-          zIndex: 99999,
-          pointerEvents: 'auto',
-          transform: 'translateY(-50%)'
-        }}
-      >
-        <GenericButton 
-          icon="pi pi-chevron-left"
-          onClick={handleToggle}
-          className="shadow-2xl border-0 rounded-r-none rounded-l-xl bg-blue-600 hover:bg-blue-700 pointer-events-auto"
-          tooltip="Show lessons"
-          tooltipOptions={{ position: 'left' }}
-          style={{
-            borderTopRightRadius: 0, 
-            borderBottomRightRadius: 0,
-            boxShadow: '0 0 20px rgba(0,0,0,0.5)',
-            width: '3rem',
-            height: '5rem'
-          }}
-        />
-      </div>
-    );
-  };
-
   // Mobile content tab
   const MobileLessonsTab = () => (
     <div className="bg-gray-900 rounded-lg overflow-hidden border border-gray-800 shadow-md mb-6">
@@ -160,9 +125,6 @@ const CourseSidebar = ({
 
   return (
     <>
-      {/* Unified button approach for desktop - only if not hidden */}
-      {!hideToggleButton && <SidebarToggle />}
-      
       {/* Mobile view - direct content instead of sidebar */}
       {isMobileView && visible && (
         <MobileLessonsTab />

src/components/menutab/MenuTab.js

@@ -32,17 +32,11 @@ export default function MenuTab({ items, activeIndex, onTabChange, sidebarVisibl
               : "pi pi-chevron-left"}
             onClick={onToggleSidebar}
             outlined={true}
-            style={{ 
-              width: '2.5rem', 
-              height: '2.5rem', 
-              backgroundColor: 'transparent',
-              border: 'none',
-              fontWeight: 'bold'
-            }}
+            rounded={true}
+            size="small"
             tooltip={sidebarVisible ? "Hide lessons" : "Show lessons"}
             tooltipOptions={{ position: 'bottom' }}
             aria-label="Toggle course lessons"
-            size="small"
           />
         </div>
       )}