align delta on the right in report graph

- better responsive handling - week view: day text won't overlap delta now since delta is not positioned absolutely anymore - same design like the detail view
urlaubsverwaltung · Oct 11, 2024 · 72f8857 · 72f8857
1 parent 0b60b78
commit 72f8857
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 8 deletions.
diff --git a/src/main/resources/templates/reports/user-report-month.html b/src/main/resources/templates/reports/user-report-month.html
@@ -77,12 +77,10 @@
             <div
               class="relative flex justify-between gap-x-2 flex-wrap text-sm"
             >
-              <span class="font-bold" th:text="${monthReport.yearMonth}">
+              <span class="font-bold flex-1" th:text="${monthReport.yearMonth}">
                 Oktober 2024
               </span>
-              <p
-                class="tabular-nums text-sm text-gray-800 font-medium sm:flex-1 sm:absolute sm:left-0 sm:right-0 sm:text-center"
-              >
+              <p class="tabular-nums text-sm text-gray-800 font-medium">
                 <span class="inline-flex items-center">
                   <th:block th:if="${monthReport.hoursDeltaNegative}"
                     >-</th:block

diff --git a/src/main/resources/templates/reports/user-report-week.html b/src/main/resources/templates/reports/user-report-week.html
@@ -78,14 +78,12 @@
               class="relative flex justify-between gap-x-2 flex-wrap text-sm"
             >
               <span
-                class="font-bold"
+                class="font-bold flex-1"
                 th:text="#{date-range.with-calendar-week(${weekReport.calendarWeek}, ${weekReport.dateRangeString})}"
               >
                 KW 40 | 30. September bis 06. Oktober 2024
               </span>
-              <p
-                class="tabular-nums text-sm text-gray-800 font-medium sm:flex-1 sm:absolute sm:left-0 sm:right-0 sm:text-center"
-              >
+              <p class="tabular-nums text-sm text-gray-800 font-medium">
                 <span class="inline-flex items-center">
                   <th:block th:if="${weekReport.hoursDeltaNegative}"
                     >-</th:block