tweaked training report scroll behaviour

ui/src/pages/TrainingReport.vue

@@ -58,6 +58,7 @@ onMounted(async () => {
                 <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p>
                 <Button @click="createTrainingReport">New Training Report</Button>
             </div>
+            <div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
                 <Table>
                     <TableHeader>
                         <TableRow>
@@ -81,6 +82,7 @@ onMounted(async () => {
                     </TableBody>
                 </Table>
             </div>
+        </div>
         <!-- view training report section -->
         <div v-if="sidePanel == sidePanelState.view" class="px-4 border-l w-1/2">
             <div class="flex justify-between my-3">
@@ -129,3 +131,32 @@ onMounted(async () => {
         </div>
     </div>
 </template>
+
+<style scoped>
+/* Firefox */
+.scrollbar-themed {
+    scrollbar-width: thin;
+    scrollbar-color: #555 #1f1f1f;
+    padding-right: 6px;
+}
+
+/* Chrome, Edge, Safari */
+.scrollbar-themed::-webkit-scrollbar {
+    width: 10px; /* slightly wider to allow padding look */
+}
+
+.scrollbar-themed::-webkit-scrollbar-track {
+    background: #1f1f1f;
+    margin-left: 6px; /* ❗ adds space between content + scrollbar */
+}
+
+.scrollbar-themed::-webkit-scrollbar-thumb {
+    background: #555;
+    border-radius: 9999px;
+}
+
+.scrollbar-themed::-webkit-scrollbar-thumb:hover {
+    background: #777;
+}
+
+</style>