From ca3f1e2d563236c7be8142e8c71d5f4511f2e02c Mon Sep 17 00:00:00 2001
From: luvi <luvi@odoo.com>
Date: Wed, 24 Aug 2022 06:50:24 +0000
Subject: [PATCH] [FIX] im_livechat: fix style of livechat_colors

This commit fixes the style of the color selectors
in a livechat view. New classnames have been added
to revert to the intended appearance of the field
in the view.

Part-of: odoo/odoo#98755
---
 addons/im_livechat/static/src/scss/im_livechat_form.scss | 5 -----
 addons/im_livechat/views/im_livechat_channel_views.xml   | 8 ++++----
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/addons/im_livechat/static/src/scss/im_livechat_form.scss b/addons/im_livechat/static/src/scss/im_livechat_form.scss
index 808e5ba8322..8c319f9417d 100644
--- a/addons/im_livechat/static/src/scss/im_livechat_form.scss
+++ b/addons/im_livechat/static/src/scss/im_livechat_form.scss
@@ -6,11 +6,6 @@
     }
 }
 
-.o_livechat_layout_colors {
-    vertical-align: middle;
-    align-items: center;
-}
-
 .o_form_view .o_group {
     // long selector in order to be more specific...
     .o_im_livechat_field_widget_color {
diff --git a/addons/im_livechat/views/im_livechat_channel_views.xml b/addons/im_livechat/views/im_livechat_channel_views.xml
index 6a4d424bbf9..8e03624aa3d 100644
--- a/addons/im_livechat/views/im_livechat_channel_views.xml
+++ b/addons/im_livechat/views/im_livechat_channel_views.xml
@@ -127,7 +127,7 @@
                                     <group string="Livechat Button">
                                         <field name="button_text"/>
                                         <label for="button_background_color" string="Livechat Button Color" />
-                                        <div class="o_livechat_layout_colors">
+                                        <div class="o_livechat_layout_colors d-flex align-items-center align-middle">
                                             <field name="button_background_color" widget="color" class="mb-4 o_im_livechat_field_widget_color"/>
                                             <field name="button_text_color" widget="color" class="mb-4 o_im_livechat_field_widget_color"/>
                                             <button class="btn btn-link oe_edit_only o_im_livechat_channel_form_button_colors_reset_button" aria-label="Reset to default colors" title="Reset to default colors">
@@ -139,9 +139,9 @@
                                         <field name="default_message" placeholder="e.g. Hello, how may I help you?"/>
                                         <field name="input_placeholder"/>
                                         <label for="header_background_color" string="Channel Header Color" />
-                                        <div class="o_livechat_layout_colors">
-                                            <field name="header_background_color" widget="color" class="mb-4 o_im_livechat_field_widget_color"/>
-                                            <field name="title_color" widget="color" class="mb-4 o_im_livechat_field_widget_color"/>
+                                        <div class="o_livechat_layout_colors d-flex align-items-center align-middle">
+                                            <field name="header_background_color" widget="color" class="mb-4 w-auto o_im_livechat_field_widget_color"/>
+                                            <field name="title_color" widget="color" class="mb-4 w-auto o_im_livechat_field_widget_color"/>
                                             <button class="btn btn-link oe_edit_only o_im_livechat_channel_form_chat_window_colors_reset_button" aria-label="Reset to default colors" title="Reset to default colors">
                                                 <span class="fa fa-refresh mb-4"/>
                                             </button>