ui/src/pages/TrainingReport.vue

@@ -118,7 +118,8 @@ onMounted(async () => {
                     <X></X>
                 </button>
             </div>
-            <div class="flex flex-col mb-5 border rounded-lg bg-muted/70 p-2 my-5 py-3 px-4">
+            <div class="max-h-[70vh] overflow-auto scrollbar-themed my-5">
+                <div class="flex flex-col mb-5 border rounded-lg bg-muted/70 p-2 py-3 px-4">
                     <p class="scroll-m-20 text-xl font-semibold tracking-tight">{{ focusedTrainingReport.course_name }}</p>
                     <div class="flex gap-10">
                         <p class="text-muted-foreground">{{ focusedTrainingReport.event_date }}</p>
@@ -128,7 +129,7 @@ onMounted(async () => {
                         </p>
                     </div>
                 </div>
-            <div class="flex flex-col gap-8">
+                <div class="flex flex-col gap-8 ">
                     <!-- Trainers -->
                     <div>
                         <label class="scroll-m-20 text-xl font-semibold tracking-tight">Trainers</label>
@@ -137,7 +138,6 @@ onMounted(async () => {
                             <span class="">Role</span>
                             <span class="text-right col-span-2">Remarks</span>
                         </div>
-
                         <div v-for="person in focusedTrainingTrainers"
                             class="grid grid-cols-4 py-2 items-center border-b last:border-none">
                             <p>{{ person.attendee_name }}</p>
@@ -207,6 +207,7 @@ onMounted(async () => {
                     </div>
                 </div>
             </div>
+        </div>
         <div v-if="sidePanel == sidePanelState.create" class="pl-7 border-l w-3/5 max-w-5xl">
             <div class="flex justify-between my-3">
                 <div class="flex pl-2 gap-5">