From bb18fa03698034bba50942afd8155d46672064e1 Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Tue, 13 May 2025 14:19:57 +0700
Subject: [PATCH] Fixed the display of the duration of events in the Calendar
 (#8905)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
---
 .../src/components/DayCalendar.svelte              | 14 ++++++++++++--
 .../components/team/calendar/PersonCalendar.svelte |  4 ++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/plugins/calendar-resources/src/components/DayCalendar.svelte b/plugins/calendar-resources/src/components/DayCalendar.svelte
index 4bb6d0f977..cc1c18b40d 100644
--- a/plugins/calendar-resources/src/components/DayCalendar.svelte
+++ b/plugins/calendar-resources/src/components/DayCalendar.svelte
@@ -865,9 +865,9 @@
             <span class="weekday">{getWeekDayName(day, weekFormat)}</span>
           {/if}
           {#if tEvents !== 0}
-            <span style:min-width={'3rem'}>
+            <div class="header-time">
               <TimeDuration value={tEvents} />
-            </span>
+            </div>
           {/if}
         </div>
       {/each}
@@ -1376,5 +1376,15 @@
         padding: 0.125rem;
       }
     }
+    .header-time {
+      position: absolute;
+      top: var(--spacing-0_25);
+      right: var(--spacing-0_25);
+      padding: var(--spacing-0_25) var(--spacing-1);
+      font-size: 0.75rem;
+      color: var(--theme-dark-color);
+      background-color: var(--theme-button-hovered);
+      border-radius: var(--small-BorderRadius);
+    }
   }
 </style>
diff --git a/plugins/time-resources/src/components/team/calendar/PersonCalendar.svelte b/plugins/time-resources/src/components/team/calendar/PersonCalendar.svelte
index 16f238e0ff..e251214cbc 100644
--- a/plugins/time-resources/src/components/team/calendar/PersonCalendar.svelte
+++ b/plugins/time-resources/src/components/team/calendar/PersonCalendar.svelte
@@ -105,8 +105,8 @@
       <div class="timeline-resource-content">
         {#each persons as person}
           <div class="timeline-row" style={getRowStyle()}>
-            <div class="timeline-resource-cell">
-              <PersonPresenter value={person} />
+            <div class="timeline-resource-cell flex-row-center">
+              <div><PersonPresenter value={person} /></div>
             </div>
           </div>
         {/each}