Course Capture Bug Fixed

src/components/CourseChapter/index.css

@@ -1,14 +1,15 @@
 .hasScrollbar::-webkit-scrollbar {
-  width:7.5px;
+  width:5px;
   background-color: rgba(0,0,0,0.08);
   border-radius: 5px;
-  height: 50px;
+
   margin-top: 200px;
 } 
 
 .hasScrollbar::-webkit-scrollbar-thumb{
   background:#196EC0;
   border-radius: 10px;
+  height: 20px;
 }
 .hasScrollbar::-webkit-scrollbar-track {
   

src/components/CourseChapter/index.js

@@ -8,7 +8,7 @@ const CourseChapter = ({ chapters }) => {
     <section style={{ width: "40%" }} className="bg-white mx-auto my-20 p-4">
       <div
         className="rounded py-5 px-4 relative"
-        style={{ backgroundColor: "#196EC033", height: '500px'}}
+        style={{ backgroundColor: "#196EC033", height: '530px'}}
       >
         {/* top */}
         <div className="flex flex-row items-center justify-between">
@@ -21,9 +21,9 @@ const CourseChapter = ({ chapters }) => {
           </div>
         </div>
         {/* divider */}
-        <div className="border-b border-blue-300 bg-opacity-10 my-5"></div>
+        <div className="border-b border-blue-300 border-solid bg-opacity-10 my-5"></div>
         {/* course title */}
-        <div className="overflow-y-scroll hasScrollbar"  style={{
+        <div className="overflow-y-scroll w-full hasScrollbar"  style={{
           height: '430px'
         }}>
         {chapters.map((chapter, index) => (
@@ -74,7 +74,7 @@ const CourseChapter = ({ chapters }) => {
                       {lesson.title}
                     </p>
                     <span
-                      className={`text-xs group-hover:text-white border-r border-blue-200 pr-1
+                      className={`text-xs group-hover:text-white border-r border-solid border-blue-200 pr-1
                     ${selectedLesson === lesson ? "text-white" : "text-blue-500"}`}
                     >
                       {lesson.duration}