fix: misc issues

frontend/src/components/VideoBlock.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<div v-if="quizzes.length && !showQuiz && readOnly" class="leading-5">
+		<div v-if="quizzes.length && !showQuiz && readOnly" class="leading-6">
 			{{
 				__('This video contains {0} {1}:').format(
 					quizzes.length,

frontend/src/pages/Lesson.vue

@@ -209,21 +209,21 @@
 							v-else
 							class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-8"
 						>
-							content
-							<!-- <LessonContent
+							<LessonContent
 								v-if="lesson.data?.body"
 								:content="lesson.data.body"
 								:youtube="lesson.data.youtube"
 								:quizId="lesson.data.quiz_id"
-							/> -->
+							/>
 						</div>
 					</div>
 					<div
 						v-if="lesson.data"
-						class="mt-10 pt-5 border-t px-5"
+						class="mt-10 pb-20 pt-5 border-t px-5"
 						ref="discussionsContainer"
 					>
 						<TabButtons
+							v-if="tabs.length > 1"
 							:buttons="tabs"
 							v-model="currentTab"
 							class="w-fit mb-10"
@@ -794,6 +794,7 @@ const showDiscussionsInZenMode = () => {
 		allowDiscussions.value = false
 	} else {
 		allowDiscussions.value = true
+		currentTab.value = 'Community'
 		scrollDiscussionsIntoView()
 	}
 }

frontend/src/utils/index.js

@@ -692,7 +692,7 @@ export const formatTimestamp = (seconds) => {
 	const hours = String(date.getUTCHours()).padStart(2, '0')
 	const minutes = String(date.getUTCMinutes()).padStart(2, '0')
 	const secs = String(date.getUTCSeconds()).padStart(2, '0')
-	return `${hours}:${minutes}:${secs}`
+	return hours > 0 ? `${hours}:${minutes}:${secs}` : `${minutes}:${secs}`
 }
 
 const getRootNode = (selector = '#editor') => {
@@ -725,20 +725,30 @@ const findMatchingTextNode = (walker, phrase) => {
 	return { node, startIndex, endIndex }
 }
 
-const createHighlightSpan = (color, name) => {
+const createHighlightSpan = (color, name, scrollIntoView) => {
 	const span = document.createElement('span')
 	span.className = 'highlighted-text'
-	span.style.backgroundColor = theme.backgroundColor[color][200]
+	if (scrollIntoView) {
+		span.style.border = `2px solid ${theme.backgroundColor[color][400]}`
+		span.style.borderRadius = '4px'
+	} else {
+		span.style.backgroundColor = theme.backgroundColor[color][200]
+	}
 	span.dataset.name = name
 	return span
 }
 
-const wrapRangeInHighlight = ({ node, startIndex, endIndex }, color, name) => {
+const wrapRangeInHighlight = (
+	{ node, startIndex, endIndex },
+	color,
+	name,
+	scrollIntoView
+) => {
 	const range = document.createRange()
 	range.setStart(node, startIndex)
 	range.setEnd(node, endIndex)
 
-	const span = createHighlightSpan(color, name)
+	const span = createHighlightSpan(color, name, scrollIntoView)
 	range.surroundContents(span)
 }
 
@@ -755,7 +765,7 @@ export const highlightText = (note, scrollIntoView = false) => {
 	const match = findMatchingTextNode(walker, phrase)
 	if (!match) return
 
-	wrapRangeInHighlight(match, color, note.name)
+	wrapRangeInHighlight(match, color, note.name, scrollIntoView)
 
 	if (scrollIntoView) {
 		match.node.parentElement.scrollIntoView({
@@ -767,7 +777,8 @@ export const highlightText = (note, scrollIntoView = false) => {
 				document.querySelectorAll('.highlighted-text')
 			highlightedElements.forEach((el) => {
 				if (el.dataset.name === note.name) {
-					el.style.backgroundColor = 'transparent'
+					el.style.border = 'none'
+					el.style.borderRadius = '0px'
 				}
 			})
 		}, 3000)