[18.0][FIX] web_widget_x2many_2d_matrix: monetary field display

[remi-filament]

As reported in #3431 display of monetary fields was incorrect on web_widget_x2many_2d_matrix.
The issue was related to the fact that the span with o_monetary_ghost_value class would not overlap the input but would be placed on the left instead.

Adding a CSS for width: 100% solves the issue and should not impact the other type of fields.

Closes #3431

[OCA-git-bot]

Hi @JasminSForgeFlow, @DavidJForgeFlow, @hbrunn,
some modules you are maintaining are being modified, check this out!

[remi-filament]

Before :

After :

[remi-filament]

The other issue I have is related to using together both web_widget_x2many_2d_matrix and web_theme_classic.
It shows double border (before and after the currency).
I know how to fix that, but I am not sure in which module it should go ? (ideally it should go in a bridge module, but I am not sure it is a good idea neither to have a bridge module only for 4 lines of CSS...).

I would be in favor of adding the following in web_widget_x2many_2d_matrix directly, please let me know what do you think ?

.o_form_view .o_field_x2many_2d_matrix {
    /* Prevent having double border for monetary fields (for instance if you use web_theme_classic) */
    span.o_input:has(span.o_monetary_ghost_value) + input.o_input {
        border: $input-border-width solid transparent !important;
    }

[hbrunn]

what does this css do without web_theme_classic? If nothing, I think it's fine to add here. Otherwise, better add it to web_theme_classic. It wold be nice anyways if web_theme_classic added some class to the body tag or similarly high up in the hierarchy, then you could target it in your module's css without a dependency

[remi-filament]

Hi @hbrunn thank you for looking into this,
There was a tiny change on border size when used without web_theme_classic. I tweaked the CSS to be as light as possible so there is no change anymore with this CSS without using web_theme_classic.

Here is the final CSS:

.o_form_view .o_field_x2many_2d_matrix {
    /* Prevent having double border for monetary fields (for instance if you use web_theme_classic) */
    span.o_input:has(span.o_monetary_ghost_value) + input.o_input {
        border-color: transparent;
    }

The only impact that this could have is when used with another module tweaking the theme of Odoo, but since there are 2 fields one over the other one, I think the impact should go unnoticed...

This change is already present in web_theme_classic for tweaking monetary field :

web/web_theme_classic/static/src/scss/web_theme_classic.scss

Lines 97 to 99 in b2d8e92

	span.o_input:has(~ input.o_input) {
	border: $input-border-width solid transparent !important;
	}

However this is only applied when you have a o_field_monetary class on form view, which is not the case with this module (I suspect because you have embedded widgets because x2many_2d_matrix is already a widget).

I will add this tiny CSS code in this PR then unless someone thinks otherwise !