From 93ed43bcb33453841ff36429f8cadf80b18c2e4e Mon Sep 17 00:00:00 2001
From: Kevin Baptiste <kba@odoo.com>
Date: Tue, 21 Jun 2022 15:09:05 +0000
Subject: [PATCH] [IMP] hr_org_chart: use flexbox

Use flex on the popover header to better handle long names.

closes odoo/odoo#94236

Taskid: 2888199
Signed-off-by: Kevin Baptiste <kba@odoo.com>
---
 addons/hr_org_chart/static/src/scss/hr_org_chart.scss | 3 +--
 addons/hr_org_chart/static/src/xml/hr_org_chart.xml   | 8 ++++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
index 8c4d9d8960d..cc8f8af2812 100644
--- a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
+++ b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
@@ -255,13 +255,12 @@
 
 // POP OVER
 .o_org_chart_popup.popover {
+    min-width: 200px;
     max-width: 400px;
     margin-right: 5px;
 
     .popover-header {
         height: 47px;
-        line-height: 33px;
-        padding-right: 50px;
 
         > a {
             @include o-position-absolute($right: 14px);
diff --git a/addons/hr_org_chart/static/src/xml/hr_org_chart.xml b/addons/hr_org_chart/static/src/xml/hr_org_chart.xml
index d68c51abb86..d3835bea5cf 100644
--- a/addons/hr_org_chart/static/src/xml/hr_org_chart.xml
+++ b/addons/hr_org_chart/static/src/xml/hr_org_chart.xml
@@ -150,10 +150,10 @@
 </t>
 
 <t t-name="hr_orgchart_emp_popover_title">
-    <div>
-        <span t-att-style='"background-image:url(\"/web/image/hr.employee.public/" + employee.id + "/avatar_1024/\")"'/>
-        <a href="#" class="float-right o_employee_redirect" t-att-data-employee-id="employee.id"><i class="fa fa-external-link" role="img" aria-label='Redirect' title="Redirect"></i></a>
-        <b><t t-esc="employee.name"/></b>
+    <div class="d-flex align-items-center">
+        <span class="flex-shrink-0" t-att-style='"background-image:url(\"/web/image/hr.employee.public/" + employee.id + "/avatar_1024/\")"'/>
+        <b class="flew-grow-1"><t t-esc="employee.name"/></b>
+        <a href="#" class="ml-auto o_employee_redirect" t-att-data-employee-id="employee.id"><i class="fa fa-external-link" role="img" aria-label='Redirect' title="Redirect"></i></a>
     </div>
 </t>