[FIX] web: set pointer events none for ribbon

The forms where we have ribbons do not provide a great user experience when the internal links are right below the ribbon. Because of the shape and size of the ribbon, the internal link button on the topmost fields gets behind the ribbon. Because the rectangular part of the ribbon is transparent, we can see the button, but cannot click or hover over it, because the ribbon element takes over. To resolve this, I set the pointer-events of ribbon to none. The ribbons already do not have any click events so this solution seems okay.

Steps to Reproduce:
1. Move a helpdesk ticket to the archive.
2. Try to move to the customer page using the internal link.

Current Behavior:
The link button cannot be hovered over and clicked.

Expected Behavior:
The link button should be above other elements and clickable.

OPW-3468153

closes odoo/odoo#140099

X-original-commit: c9aa5fb7645470c5a63784e58fdb4ee9acf7d5e8
Signed-off-by: Bastien Fafchamps (bafa) <bafa@odoo.com>
Signed-off-by: Simon Goffin (sig) <sig@odoo.com>
This commit is contained in:
Hamza (hisl)
2023-10-30 12:05:26 +00:00
committed by Abdelouahab (abla)
parent 9f70f90df7
commit c3289f0734
@@ -43,6 +43,7 @@
--Ribbon-gap-top-default: calc(var(--formView-sheet-padding-y, 0) * -1 - #{$border-width});
--Ribbon-gap-right-default: -#{$border-width};
pointer-events: none;
margin-top: var(--Ribbon-gap-top, var(--Ribbon-gap-top-default));
right: var(--Ribbon-gap-right, var(--Ribbon-gap-right-default));