17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 22 Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

tweaked training report scroll behaviour

Browse Source
This commit is contained in:
ajdj100
2025-11-20 09:06:16 -05:00
parent aad87096b5
commit a075162502
1 changed files with 53 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
ui/src/pages/TrainingReport.vue
View File

@@ -58,6 +58,7 @@ onMounted(async () => {
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p> <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p>
<Button @click="createTrainingReport">New Training Report</Button> <Button @click="createTrainingReport">New Training Report</Button>
</div> </div>
<div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
@@ -81,6 +82,7 @@ onMounted(async () => {
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
</div>
<!-- view training report section --> <!-- view training report section -->
<div v-if="sidePanel == sidePanelState.view" class="px-4 border-l w-1/2"> <div v-if="sidePanel == sidePanelState.view" class="px-4 border-l w-1/2">
<div class="flex justify-between my-3"> <div class="flex justify-between my-3">
@@ -129,3 +131,32 @@ onMounted(async () => {
</div> </div>
</div> </div>
</template> </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>