diff --git a/addons/hr/hr_view.xml b/addons/hr/hr_view.xml
index 996967d18d9..f6fd3466e0f 100644
--- a/addons/hr/hr_view.xml
+++ b/addons/hr/hr_view.xml
@@ -139,15 +139,19 @@
                     <a type="edit"><img t-att-src="kanban_image('hr.employee', 'photo', record.id.value)" class="oe_employee_picture"/></a>
                   </div>
                   <div class="oe_employee_details">
-                    <h4><a type="edit"><field name="name"/></a></h4>
+                    <h4><a type="edit"><field name="name"/> (<field name="user_id"/>)</a></h4>
                     <ul>
                       <li t-if="record.department_id.raw_value"><field name="department_id"/></li>
                       <li t-if="record.job_id.raw_value"><field name="job_id"/></li>
+                      <li t-if="record.work_location.raw_value"><field name="work_location"/></li>
+                      <li t-if="record.work_phone.raw_value">Tel: <field name="work_phone"/></li>
+                      <li t-if="record.mobile_phone.raw_value">Mobile: <field name="mobile_phone"/></li>
                       <li t-if="record.work_email.raw_value"><a t-attf-href="mailto:#{record.work_email.value}"><field name="work_email"/></a></li>
-                      <li t-if="record.work_phone.raw_value"><field name="work_phone"/></li>
-                      <li t-if="record.mobile_phone.raw_value"><field name="mobile_phone"/></li>
                     </ul>
                   </div>
+                  <script>
+                    $('.oe_employee_picture').load(function() { if($(this).width() > $(this).height()) { $(this).addClass('oe_employee_picture_wide') } });
+                  </script>
                 </t>
               </templates>
           </kanban>
diff --git a/addons/hr/static/src/css/hr.css b/addons/hr/static/src/css/hr.css
index 303f8ac11c3..83a93c20133 100644
--- a/addons/hr/static/src/css/hr.css
+++ b/addons/hr/static/src/css/hr.css
@@ -13,23 +13,30 @@
   -o-border-radius: 3px;
   -ms-border-radius: 3px;
   border-radius: 3px;
-  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-  -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-  -box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  -box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
 }
 
 .oe_employee_picture {
   width: 100px;
   height: auto;
-  clip: rect(10px, 110px, 100px, 0px);
+  clip: rect(10px, 100px, 110px, 0px);
+}
+
+.oe_employee_picture_wide {
+  height: 100px;
+  width: auto;
+  clip: rect(0px, 115px, 100px, 15px);
 }
 
 .oe_employee_details {
-  width: 200px;
+  width: 220px;
   font-size: 13px;
   padding: 2px 5px;
   color: #4c4c4c;
+  min-height: 120px;
 }
 
 .oe_employee_details h4 {