fix: clip progress bar width to 100% (#892)

* fix: course progress bar should not go beyond 100% width

* refactor: progress bar component should include outer body div

frontend/src/pages/Lesson.vue

@@ -162,17 +162,11 @@
 					<div v-if="user && lesson.data.membership" class="text-sm mt-3">
 						{{ Math.ceil(lesson.data.membership.progress) }}% completed
 					</div>
-					<div
+
+					<ProgressBar
 						v-if="user && lesson.data.membership"
-						class="w-full bg-gray-200 rounded-full h-1 my-2"
-					>
-						<div
-							class="bg-gray-900 h-1 rounded-full"
-							:style="{
-								width: Math.ceil(lesson.data.membership.progress) + '%',
-							}"
-						></div>
-					</div>
+						:progress="lesson.data.membership.progress"
+					/>
 				</div>
 				<CourseOutline
 					:courseName="courseName"
@@ -195,6 +189,7 @@ import { getEditorTools } from '../utils'
 import EditorJS from '@editorjs/editorjs'
 import LessonContent from '@/components/LessonContent.vue'
 import CourseInstructors from '@/components/CourseInstructors.vue'
+import ProgressBar from '@/components/ProgressBar.vue'
 
 const user = inject('$user')
 const route = useRoute()