From bef68e577a8b866642c9bebc79c17ea7c7aaa9d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexandre=20K=C3=BChn?= Date: Mon, 30 Oct 2023 15:12:18 +0100 Subject: [PATCH] [FIX] mail: center avatar with composer with a single line MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Before this commit, the avatar next to composer in Discuss app had the top aligned with the top of the text input of composer. The avatar is smaller than the input, and the text in the input is centered, so the alignment looks off. This commit fixes the issue by offseting the avatar so that when the composer has only 1 line, the avatar is vertically centered with the input. Note that this alignment should be fixed, i.e. if the input field has more than 1 line, we want to keep the avatar in the same place, hence why the avatar is just statically offset. Also align composer avatar with message list, by removing the `align-justify: self` that was moving avatar slightly towards the discuss app sidebar. closes odoo/odoo#140398 X-original-commit: 5fe4297f3d1a988ae65617c177046a223bc62890 Signed-off-by: Sébastien Theys (seb) Signed-off-by: Alexandre Kühn (aku) --- addons/mail/static/src/core/common/composer.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/addons/mail/static/src/core/common/composer.scss b/addons/mail/static/src/core/common/composer.scss index ab2987dd148..be567c17f23 100644 --- a/addons/mail/static/src/core/common/composer.scss +++ b/addons/mail/static/src/core/common/composer.scss @@ -11,8 +11,8 @@ } .o-mail-Composer-sidebarMain { + padding-top: 0.1875rem; // avatar centered with composer text input: 36px (avatar) + 2*3px (this value) = 20px + 2 * { 10px (padding) + 1px (border) } width: 48px; - justify-self: center; } .o-mail-Composer-coreHeader { @@ -45,6 +45,7 @@ padding-bottom: 10px; max-height: 100px; resize: none; + line-height: 1.42857143 !important; // so that input is rounded to 20px = 14px (base font) * 1.42857143 (line-height) .o-extended:not(.o-isUiSmall) & { max-height: 400px; @@ -68,4 +69,5 @@ top: -10000px; padding-top: 10px; padding-bottom: 10px; + line-height: 1.42857143 !important; // so that input is rounded to 20px = 14px (base font) * 1.42857143 (line-height) }