From 4ce90e196d6281797ef7f2f3b6e879d47b137f89 Mon Sep 17 00:00:00 2001
From: Pierre Paridans <app@odoo.com>
Date: Thu, 19 Jan 2023 14:20:34 +0000
Subject: [PATCH] [FIX] web: oe_title + oe_avatar alignment in Form view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit fixes a broken selector when an avatar image (`.oe_avatar`)
is used next to a title element (`.oe_title`) to put them side-by-side.

Also it goes beyond that by ensuring the `.oe_title` element doesn't
take the whole width (cf. max 75%) to make a visual distinction between
it and the other form's fields, both in editable and non-editable form.

In small screen, as space is limited, the whole width is kept to make it
more userfriendly, only allowing a thin gap between the `.oe_title` and
the `.oe_avatar`.

Steps to reproduce:
- Open Apps
- Choose an App and, in the dropdown, click on Module Info
=> there is a huge gap at the top of the title

closes odoo/odoo#112205

X-original-commit: 45ebcbf320eaeedf0a4c6c068ea727cf18bedd4b
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
---
 .../src/views/form/form_controller.scss       | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/addons/web/static/src/views/form/form_controller.scss b/addons/web/static/src/views/form/form_controller.scss
index dfa6f2faadf..4dec998b667 100644
--- a/addons/web/static/src/views/form/form_controller.scss
+++ b/addons/web/static/src/views/form/form_controller.scss
@@ -173,8 +173,6 @@
         }
 
         .oe_title {
-            max-width: 75%;
-
             .o_field_char {
                 width: 100%;
             }
@@ -368,9 +366,11 @@
     // Title
     .oe_title {
         color: $headings-color;
-        @include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
-            padding-right: $o-innergroup-rpadding;
+
+        @include media-breakpoint-up(sm) {
+            max-width: 75%;
         }
+
         > h1, > h2, > h3 {
             width: 100%; // Needed because inline-block when is a hx.o_row
             margin-top: 0;
@@ -390,9 +390,6 @@
         > h2 {
             min-height: 42px;
         }
-        .oe_avatar + & {
-            padding-right: $o-avatar-size + 10;
-        }
     }
 
     // Avatar
@@ -400,12 +397,18 @@
         float: right;
         margin-bottom: 10px;
 
-        > div > img {
+        .img {
             max-width: $o-avatar-size;
             max-height: $o-avatar-size;
             vertical-align: top;
             border: 1px solid $o-gray-300;
         }
+
+        @include media-breakpoint-down(sm) {
+            + .oe_title {
+                max-width: calc(100% - #{$o-avatar-size} - #{map-get($spacers, 2)});
+            }
+        }
     }
 
     // Status dropdown