From e14edcc22464ba798f13e2b7d58f52cd6e94e7aa Mon Sep 17 00:00:00 2001
From: Romeo Fragomeli <rfr@odoo.com>
Date: Mon, 26 Feb 2024 12:49:39 +0100
Subject: [PATCH] [FIX] web: squashed/wrapped text in grid layout

Since Odoo v16, we also use grid in the form layout (inner group).
In a group we use the CSS `grid-template-columns` with the value of:
* `fit-content(150px)`: for the first column (TLDR: col max 150px)
* `1fr`: for the second column (TLDR: take the "remaining" max space)
```css
.o_form_view .o_inner_group {
  grid-template-columns: fit-content(150px) 1fr;
}
```
These rules at the first glance seem correct.
But due to "big word"/language, some unbreakable text is overflowing,
to avoid this, we have added the `text-break` BS class.

So now all text can be "squash"/wrap if there is no space available.

The problem is when we have a text be too long and unbreakable in the
second column, the label (first column) is squashed to see only one or
two characters.

In our case, the bug happens when we upload a file with a big filename
to an "Attachement" (`many2many_binary`) field.

On the `many2many_binary` field there is a custom CSS rules:
```css
.o_attachment .caption {
  white-space: nowrap;
}
```
that force the text to not wrap on the next line, and so the grid takes
the width of the file name as its min value for the width of the
second column, and "squash"/wrap the first column.

This commit fixes the issue by allowing the second column to be smaller
than the `max-content` width using the css `minmax(0, 1fr)`.

Steps to reproduce:
* Open "Marketing automation" app
* Create a New campaign ("New" button)
* Click on "ADD NEW ACTIVITY"
* Select the "Mail Template" field
* Create and edit a "Mail Template"
* Click on the "Options" tab
* Upload an attachment with a long name
  => BUG, all labels (first column) are "squashed"

Note:
* the `text-break` class is equivalent to:
```css
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
```
* when we use `Xfr` (X a positive numeric value `1fr` in our case)
outside a `minmax()` notation, the GRID specs[1] specifies that it
should be converted to `minmax(auto, Xfr)`.
* also the `auto`[2] in the case of `minmax(auto, Xfr)`the value
represents the largest minimum size (in our case, the file name).

[1]: https://www.w3.org/TR/css-grid-2/#valdef-grid-template-columns-flex
[2]: https://www.w3.org/TR/css-grid-2/#valdef-grid-template-columns-auto

task-3644267

closes odoo/odoo#155650

X-original-commit: dbf1794799f2be54e0a0da7719cde3e5069fcdd9
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
Signed-off-by: Romeo Fragomeli (rfr) <rfr@odoo.com>
---
 addons/web/static/src/views/form/form_controller.scss | 2 +-
 addons/web/static/tests/views/form/form_view_tests.js | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/views/form/form_controller.scss b/addons/web/static/src/views/form/form_controller.scss
index 22cf27a9222..f2997a24d95 100644
--- a/addons/web/static/src/views/form/form_controller.scss
+++ b/addons/web/static/src/views/form/form_controller.scss
@@ -421,7 +421,7 @@
 
     @include media-breakpoint-up(sm) {
         .o_inner_group {
-            grid-template-columns: fit-content(150px) 1fr;
+            grid-template-columns: fit-content(150px) minmax(0, 1fr);
             &.o_form_fw_labels {
                 grid-template-columns: 150px 1fr;
             }
diff --git a/addons/web/static/tests/views/form/form_view_tests.js b/addons/web/static/tests/views/form/form_view_tests.js
index 48f0e1edf16..8461d02f87d 100644
--- a/addons/web/static/tests/views/form/form_view_tests.js
+++ b/addons/web/static/tests/views/form/form_view_tests.js
@@ -14268,8 +14268,13 @@ QUnit.module("Views", (hooks) => {
         const table = target.querySelector("table");
         const group = target.querySelector(".o_inner_group:last-child");
 
+        // Testing not overflowing on render
         assert.equal(group.clientWidth, group.scrollWidth);
+
+        // Testing that the table will overflow if no value is calculated
         table.style.tableLayout = "auto";
+        // Allow overflowing over the inner group for testing purpose
+        group.querySelectorAll(".o_cell").forEach((el) => (el.style.minWidth = "min-content"));
         assert.ok(group.clientWidth < group.scrollWidth);
     });