[FIX] hr: fix employee_public avatar display in mobile UI

The employee form view displayed misaligned avatar images on mobile screens.

task-5241292

closes #238154

X-original-commit: f0e5804
Signed-off-by: Yannick Tivisse (yti) <yti@odoo.com>

Author: Mahmoudk3m

addons/hr/views/hr_employee_public_views.xml

@@ -42,13 +42,13 @@
                         <div class="oe_button_box" name="button_box">
                             <!-- Used by other modules-->
                         </div>
-                        <div class="row flex-column flex-sm-row align-items-center">
-                            <div class="o_employee_avatar ms-2 p-0 h-100 mw-25 align-self-start align-self-sm-center">
+                        <div class="d-flex flex-column flex-sm-row align-items-center">
+                            <div class="o_employee_avatar ms-2 p-0 h-100">
                                 <field name="image_1920" widget='image' class="m-0" options='{"size": [128,158], "zoom": true, "preview_image":"avatar_128"}'/>
                                 <field name="show_hr_icon_display" invisible="1" />
                             </div>
-                            <div class="align-self-start o_employee_form_header_info">
-                                <div class="oe_title ps-0 pe-2 mw-100">
+                            <div class="col-12 col-sm-6 col-md-7 col-lg-8 px-4 o_employee_form_header_info">
+                                <div class="oe_title mw-100 ps-0 pe-sm-2">
                                     <h1 class="d-flex flex-row align-items-center">
                                         <field name="name" placeholder="Employee's Name"
                                             required="True" style="font-size: min(4vw, 2.6rem);"/>