[FIX] mail: center avatar with composer with a single line

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) <seb@odoo.com>
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

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)
 }