ISSUE-130: UI fixes for monthly overview

robiningelbrecht · robiningelbrecht · commit c23ed7d1743c · 2025-01-10T22:40:36.000+01:00
diff --git a/public/assets/flowbite/tailwind.min.css b/public/assets/flowbite/tailwind.min.css
@@ -1367,6 +1367,10 @@ input:checked + .toggle-bg {
   height: 100vh;
 }
 
+.max-h-\[calc\(100vh-200px\)\] {
+  max-height: calc(100vh - 200px);
+}
+
 .max-h-\[calc\(100vh-240px\)\] {
   max-height: calc(100vh - 240px);
 }
diff --git a/templates/html/monthly-stats.html.twig b/templates/html/monthly-stats.html.twig
@@ -13,9 +13,9 @@
         <!-- MONTHLY STATS -->
         <div class="grid grid-cols-1 mb-4">
             <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:p-6">
-                <div class="relative overflow-x-auto">
+                <div class="overflow-auto max-h-[calc(100vh-200px)] relative">
                     <table class="w-full text-sm text-center text-gray-500">
-                        <thead class="text-xs text-gray-700 uppercase bg-gray-50">
+                        <thead class="z-[10] sticky top-0 text-xs text-gray-700 uppercase bg-gray-50">
                         <tr>
                             <th scope="col" class="px-2 py-3 sticky left-0 bg-gray-50">
 
diff --git a/tests/Domain/Strava/BuildHtmlVersion/__snapshots__/BuildHtmlVersionCommandHandlerTest--testHandle--buildhtmlmonthly-stats.html.html b/tests/Domain/Strava/BuildHtmlVersion/__snapshots__/BuildHtmlVersionCommandHandlerTest--testHandle--buildhtmlmonthly-stats.html.html
@@ -18,9 +18,9 @@
             <!-- MONTHLY STATS -->
         <div class="grid grid-cols-1 mb-4">
             <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:p-6">
-                <div class="relative overflow-x-auto">
+                <div class="overflow-auto max-h-[calc(100vh-200px)] relative">
                     <table class="w-full text-sm text-center text-gray-500">
-                        <thead class="text-xs text-gray-700 uppercase bg-gray-50">
+                        <thead class="z-[10] sticky top-0 text-xs text-gray-700 uppercase bg-gray-50">
                         <tr>
                             <th scope="col" class="px-2 py-3 sticky left-0 bg-gray-50">
 
diff --git a/tests/Domain/Strava/BuildHtmlVersion/__snapshots__/BuildHtmlVersionCommandHandlerTest--testHandleForRunningActivitiesOnly--buildhtmlmonthly-stats.html.html b/tests/Domain/Strava/BuildHtmlVersion/__snapshots__/BuildHtmlVersionCommandHandlerTest--testHandleForRunningActivitiesOnly--buildhtmlmonthly-stats.html.html
@@ -18,9 +18,9 @@
             <!-- MONTHLY STATS -->
         <div class="grid grid-cols-1 mb-4">
             <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:p-6">
-                <div class="relative overflow-x-auto">
+                <div class="overflow-auto max-h-[calc(100vh-200px)] relative">
                     <table class="w-full text-sm text-center text-gray-500">
-                        <thead class="text-xs text-gray-700 uppercase bg-gray-50">
+                        <thead class="z-[10] sticky top-0 text-xs text-gray-700 uppercase bg-gray-50">
                         <tr>
                             <th scope="col" class="px-2 py-3 sticky left-0 bg-gray-50">
 
diff --git a/tests/strava.db b/tests/strava.db

Original file line number	Diff line number	Diff line change
`@@ -1367,6 +1367,10 @@ input:checked + .toggle-bg {`
`1367`	`1367`	`height: 100vh;`
`1368`	`1368`	`}`
`1369`	`1369`
	`1370`	`+.max-h-\[calc\(100vh-200px\)\] {`
	`1371`	`+ max-height: calc(100vh - 200px);`
	`1372`	`+}`
	`1373`	`+`
`1370`	`1374`	`.max-h-\[calc\(100vh-240px\)\] {`
`1371`	`1375`	`max-height: calc(100vh - 240px);`
`1372`	`1376`	`}`