From 0730c5ecff8fd90a68e57d022f637210327d9076 Mon Sep 17 00:00:00 2001
From: Horilla <support@horilla.com>
Date: Tue, 18 Nov 2025 11:26:06 +0530
Subject: [PATCH] [UPDT] EMPLOYEE: Updated the birthday event card to prevent
 overflow

---
 .../dashboard/birthdays_container.html        | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/employee/templates/dashboard/birthdays_container.html b/employee/templates/dashboard/birthdays_container.html
index 454db918e..8d31aa2e0 100644
--- a/employee/templates/dashboard/birthdays_container.html
+++ b/employee/templates/dashboard/birthdays_container.html
@@ -3,27 +3,32 @@
 <div class="oh-dashboard__events w-100">
     <div class="oh-dashbaord__events-reel w-100" id="birthdayContainer" style="transform: translateX(0%);">
         {% for birthday in birthdays %}
-            <div class="oh-dashboard__event" style="background-color: rgb(231, 76, 60);">
-                <div class="oh-dasboard__event-photo">
-                    <img onload="autoSlider()" src="{{birthday.profile}}"
-                        style="width: 100%;height: 100%;object-fit: cover;">
-                </div>
-                <div class="oh-dasboard__event-details">
-                    <span class="oh-dashboard__event-title">{% trans "Birthday" %}</span>
-                    <span class="oh-dashboard__event-main">{{birthday.name}}</span>
-                    <span class="oh-dashboard__event-date">{{birthday.dob}}, {{birthday.daysUntilBirthday}}</span>
-                    <span class="oh-dashboard__event-date"
-                        style="font-size:10px;">{{birthday.job_position}}{% if birthday.job_position and birthday.department %}, {% endif %}{{birthday.department}}</span>
-                </div>
+        <div class="oh-dashboard__event" style="background-color: rgb(231, 76, 60);">
+            <div class="oh-dasboard__event-photo">
+                <img onload="autoSlider()" src="{{birthday.profile}}"
+                    style="width: 100%;height: 100%;object-fit: cover;">
             </div>
+            <div class="oh-dasboard__event-details">
+                <span class="oh-dashboard__event-title">{% trans "Birthday" %}</span>
+                <span class="oh-dashboard__event-main"
+                    title="{{birthday.name}}">{{birthday.name|truncatechars:24}}</span>
+                <span class="oh-dashboard__event-date">{{birthday.dob}}, {{birthday.daysUntilBirthday}}</span>
+                <span class="oh-dashboard__event-date" style="font-size:10px;" title="{{birthday.job_position}}">
+                    {{birthday.job_position|truncatechars:24}}
+                </span>
+                <span class="oh-dashboard__event-date" style="font-size:10px;" title="{{birthday.department}}"></span>
+                    {{birthday.department|truncatechars:24}}
+                </span>
+            </div>
+        </div>
         {% endfor %}
     </div>
     <ul class="oh-dashboard__events-nav" id="birthdayDots">
         {% for birthday in birthdays %}
-            <li onclick="moveSlider(event)"
-                class="oh-dashboard__events-nav-item {% if forloop.first %}oh-dashboard__events-nav-item--active{% endif %}"
-                data-target="{{ forloop.counter0 }}">
-            </li>
+        <li onclick="moveSlider(event)"
+            class="oh-dashboard__events-nav-item {% if forloop.first %}oh-dashboard__events-nav-item--active{% endif %}"
+            data-target="{{ forloop.counter0 }}">
+        </li>
         {% endfor %}
     </ul>
 </div>