diff --git a/web_responsive/README.rst b/web_responsive/README.rst
index d5c387cdf..a82daccef 100644
--- a/web_responsive/README.rst
+++ b/web_responsive/README.rst
@@ -126,6 +126,7 @@ Known issues / Roadmap
new size. This is Odoo's own limitation.
* App navigation with keyboard.
* Make it more beautiful. Maybe OCA-branded?
+* Handle long titles on forms in a better way
Bug Tracker
===========
diff --git a/web_responsive/readme/ROADMAP.rst b/web_responsive/readme/ROADMAP.rst
index d2ca35cd2..f6a669c3d 100644
--- a/web_responsive/readme/ROADMAP.rst
+++ b/web_responsive/readme/ROADMAP.rst
@@ -4,3 +4,4 @@
new size. This is Odoo's own limitation.
* App navigation with keyboard.
* Make it more beautiful. Maybe OCA-branded?
+* Handle long titles on forms in a better way
diff --git a/web_responsive/static/description/index.html b/web_responsive/static/description/index.html
index 6c23c0c4d..8bbf5bf4d 100644
--- a/web_responsive/static/description/index.html
+++ b/web_responsive/static/description/index.html
@@ -463,6 +463,7 @@ you should reload the web client to get the full experience for that
new size. This is Odoo’s own limitation.
App navigation with keyboard.
Make it more beautiful. Maybe OCA-branded?
+Handle long titles on forms in a better way
diff --git a/web_responsive/static/src/css/web_responsive.scss b/web_responsive/static/src/css/web_responsive.scss
index 3e00758f2..794e50028 100644
--- a/web_responsive/static/src/css/web_responsive.scss
+++ b/web_responsive/static/src/css/web_responsive.scss
@@ -16,6 +16,15 @@
transform: none !important;
}
+// Support for long titles
+@include media-breakpoint-up(md) {
+ .o_form_view .oe_button_box + .oe_title,
+ .o_form_view .oe_button_box + .oe_avatar + .oe_title {
+ /* Button-box has a hardcoded width of 132px per button and have three columns */
+ width: calc(100% - 450px);
+ }
+}
+
// Main navbar (with apps menu, user menu, debug menu...)
@include media-breakpoint-down(sm) {
.o_main_navbar {
@@ -345,8 +354,6 @@ html .o_web_client .o_action_manager .o_action {
// Support for long title (with ellipsis)
.oe_title {
- width: initial;
-
span.o_field_widget {
max-width: 100%;
text-overflow: ellipsis;
@@ -377,6 +384,11 @@ html .o_web_client .o_action_manager .o_action {
max-width: 100%;
}
+ .oe_button_box + .oe_title,
+ .oe_button_box + .oe_avatar + .oe_title {
+ width: 100%;
+ }
+
// Avoid overflow on modals
.o_form_sheet {
min-width: auto;