From a4ef58e6d52f6b9fa9c0e175c43e0cae4203bd9d Mon Sep 17 00:00:00 2001
From: Leonardo Pavan Rocha <lpr@odoo.com>
Date: Wed, 25 Oct 2023 11:49:21 +0200
Subject: [PATCH] [FIX] web: datetime picker gap not being set between picker
 titles

Currently the datetime picker computes a gap property in css for the rendered
titles, however since the display is not set as flex, the gap is not applied.
This commit adds the flex display so that the gap is applied.

task-3570053

Part-of: odoo/odoo#139736
---
 .../src/core/datetime/datetime_picker.scss    |  1 -
 .../src/core/datetime/datetime_picker.xml     | 30 ++++++++++---------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/addons/web/static/src/core/datetime/datetime_picker.scss b/addons/web/static/src/core/datetime/datetime_picker.scss
index 2930312881e..b380df726ab 100644
--- a/addons/web/static/src/core/datetime/datetime_picker.scss
+++ b/addons/web/static/src/core/datetime/datetime_picker.scss
@@ -6,7 +6,6 @@
     --DateTimePicker__Day-template-rows: 6;
 
     // Header
-
     .o_datetime_picker_header .o_header_part {
         text-transform: none;
     }
diff --git a/addons/web/static/src/core/datetime/datetime_picker.xml b/addons/web/static/src/core/datetime/datetime_picker.xml
index 8f9496d7b03..0ea77720c05 100644
--- a/addons/web/static/src/core/datetime/datetime_picker.xml
+++ b/addons/web/static/src/core/datetime/datetime_picker.xml
@@ -136,33 +136,35 @@
 
     <t t-name="web.DateTimePicker">
         <div
-            class="o_datetime_picker d-flex flex-column gap-1 user-select-none"
+            class="o_datetime_picker d-flex flex-column gap-2 p-2 p-lg-3 user-select-none"
             t-attf-style="--DateTimePicker__Day-template-columns: {{ props.showWeekNumbers ?? !props.range ? 8 : 7 }}"
         >
-            <nav class="o_datetime_picker_header d-flex align-items-center justify-content-between">
+            <nav class="o_datetime_picker_header btn-group">
+                <button class="o_previous btn btn-light flex-grow-0"
+                        t-att-class="isLastPrecisionLevel ? 'order-1 btn-sm px-1' : ''" t-on-click="previous">
+                    <i class="oi oi-chevron-left" t-att-title="activePrecisionLevel.prevTitle" />
+                </button>
                 <button
-                    class="o_zoom_out o_datetime_button btn btn-light btn-sm px-1 text-truncate"
-                    t-att-class="isLastPrecisionLevel ? 'pe-none' : ''"
+                    class="o_zoom_out o_datetime_button btn btn-light d-flex align-items-center px-0 text-truncate"
+                    t-att-class="isLastPrecisionLevel ? 'pe-none text-start' : 'justify-content-around'"
                     t-att-title="!isLastPrecisionLevel and activePrecisionLevel.mainTitle"
                     t-on-click="zoomOut"
                 >
                     <t t-foreach="titles" t-as="title" t-key="title">
                         <strong
-                            t-attf-class="o_header_part fs-6 {{
-                                props.range ? 'flex-basis-50' : 'flex-basis-100'
+                            t-attf-class="o_header_part fs-5 {{
+                                props.range ? 'flex-basis-50' : 'flex-basis-100',
+                                isLastPrecisionLevel ? 'fs-6' : 'fs-5'
                             }}"
                             t-esc="title"
                         />
                     </t>
                 </button>
-                <div class="btn-group btn-group-sm">
-                    <button class="o_previous btn btn-light btn-sm flex-grow-0 px-1" t-on-click="previous">
-                        <i class="oi oi-chevron-left" t-att-title="activePrecisionLevel.prevTitle" />
-                    </button>
-                    <button class="o_next btn btn-light flex-grow-0 px-1" t-on-click="next">
-                        <i class="oi oi-chevron-right" t-att-title="activePrecisionLevel.nextTitle" />
-                    </button>
-                </div>
+                <button class="o_next btn btn-light flex-grow-0"
+                        t-att-class="isLastPrecisionLevel ? 'order-2 btn-sm px-1' : ''"
+                        t-on-click="next">
+                    <i class="oi oi-chevron-right" t-att-title="activePrecisionLevel.nextTitle" />
+                </button>
             </nav>
             <t t-if="state.precision === 'days'">
                 <t t-call="web.DateTimePicker.Days" />