[FIX] hr_attendance: kiosk mode phone display

Issue:
======
the display of kiosk mode in phone is broken

Steps to reproduce the issue:
=============================
- Install hr_attendance
- Activate Employee Pin Identification in the settings
- Change to phone view
- Go to attendances/kiosk mode
- Identify Manually
- You can't search for employee , scroll employees and see the name of
  the employees.
- Click on any employee, the button back isn't fully shown and clicking
  on it does nothing.

Solution:
=========
Display:
- Added some css for `md` size devices.

Back button:
- There click function was missing.

opw-3645708

closes odoo/odoo#147830

Signed-off-by: Sofie Gvaladze (sgv) <sgv@odoo.com>

addons/hr_attendance/static/src/components/card_layout/card_layout.xml

@@ -4,7 +4,7 @@
 <t t-name="hr_attendance.CardLayout">
     <div class="o_hr_attendance_kiosk_mode_container o_attendance_background d-flex flex-column align-items-center justify-content-center h-100 text-center position-relative">
         <span class="o_hr_attendance_kiosk_backdrop position-absolute top-0 start-0 end-0 bottom-0 bg-black-25"/>
-        <div t-attf-class="o_hr_attendance_kiosk_mode flex-grow-1 flex-md-grow-0 card pb-3 px-0 px-lg-5 {{props.kioskModeClasses}}">
+        <div t-attf-class="o_hr_attendance_kiosk_mode flex-grow-1 flex-md-grow-0 card pb-3 px-0 px-lg-5 {{props.kioskModeClasses}}" style="margin:15px;">
             <div class="card-body d-flex flex-column p-0 p-md-4">
                 <t t-slot="default" />
             </div>

addons/hr_attendance/static/src/components/manual_selection/manual_selection.xml

@@ -62,7 +62,7 @@
                         </ul>
                     </section>
                 </div>
-                <div class="o_kanban_renderer o_renderer d-flex o_kanban_ungrouped align-content-start flex-wrap justify-content-start" style="width:1050px;height:500px;overflow-y:scroll;">
+                <div class="o_kanban_renderer o_renderer d-flex o_kanban_ungrouped align-content-start flex-wrap justify-content-start" style="max-width:1050px;max-height:500px;overflow-y:scroll;">
                 <t t-foreach="this.state.displayedEmployees" t-as="employee" t-key="employee.id">
                 <div t-on-click="() => this.props.onSelectEmployee(employee.id)" role="article" class="o_kanban_record d-flex oe_kanban_global_click flex-md-shrink-1 flex-shrink-0">
                     <div class="oe_kanban_global_click">

addons/hr_attendance/static/src/components/pin_code/pin_code.xml

@@ -8,7 +8,7 @@
 </t>
 
 <t t-name="hr_attendance.KioskPinConfirm">
-        <button class="o_hr_attendance_back_button btn btn-block btn-secondary btn-lg d-block d-md-none py-5">
+        <button t-on-click="() => this.props.onClickBack()" class="o_hr_attendance_back_button btn btn-block btn-secondary btn-lg d-block d-md-none py-5">
             <i class="oi oi-chevron-left me-2"/> Go back
         </button>
         <t t-call="hr_attendance.EmployeeBadge">

addons/hr_attendance/static/src/hr_attendance.scss

@@ -2,6 +2,17 @@
 .o_hr_attendance_kiosk_mode {
     @include media-breakpoint-down(md) {
         width: 100%;
+        .o_search_panel {
+                width: 100% !important;
+                max-height: 200px !important;
+            }
+        .o_kanban_renderer {
+            max-height: 400px !important;
+        }
+        .card-body {
+            padding-left: 5px !important;
+            padding-right: 5px !important;
+        }
     }
 }