Fix learning content header

client/src/components/learningPath/LearningContent.vue

@@ -34,6 +34,7 @@ const block = computed(() => {
       @exit="circleStore.closeLearningContent(props.learningContent)"
       @next="circleStore.continueFromLearningContent(props.learningContent)"
     >
+      <div class="content">
         <div
           v-if="
             block.type === 'exercise' ||
@@ -85,18 +86,16 @@ const block = computed(() => {
 
           <div v-else class="text-large my-4">{{ block.value.description }}</div>
         </div>
+      </div>
     </LearningContentContainer>
   </div>
 </template>
 
 <style lang="scss" scoped>
 $header-height: 77px;
-$footer-height: 57px;
 
-$content-height: $header-height + $footer-height;
-
-.h-screen {
-  height: calc(100vh - $content-height);
+.content {
+  padding-top: $header-height;
 }
 
 .resource-text {
@@ -108,9 +107,7 @@ $content-height: $header-height + $footer-height;
     margin-bottom: 48px;
   }
 }
-</style>
 
-<style lang="scss">
 .resource-text {
   p {
     margin-bottom: 1.5rem;

client/src/components/learningPath/LearningContentContainer.vue

@@ -14,8 +14,10 @@ const emit = defineEmits(["back", "next", "exit"]);
 </script>
 
 <template>
-  <div>
-    <nav class="px-4 lg:px-8 py-4 flex justify-between items-center border-b">
+  <div class="overflow-y-scroll h-content">
+    <nav
+      class="px-4 lg:px-8 py-4 flex justify-between items-center border-b bg-white absolute w-full"
+    >
       <button
         type="button"
         class="btn-text inline-flex items-center px-3 py-2"
@@ -53,4 +55,10 @@ const emit = defineEmits(["back", "next", "exit"]);
   </div>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+$footer-height: 57px;
+
+.h-content {
+  height: calc(100vh - $footer-height);
+}
+</style>