[FIX] web: ribbon in form doesn't overlap kanban state

Have a project.task that is archived
Display it in form view and with the chatter on the side (big screen)
(though the issue happens at any viewport size, with slight difference is positioning)

Before this commit, the field kanban_state is under the ribbon, with no way
to interact with it.
It could happen with the title itself, or with any field that we'd put
on the right side of the form.

After this commit, the kanban_state field is visible.
In short, siblings of the ribbon now have some right margin in css.

task-2226237

closes odoo/odoo#56579

X-original-commit: d701317a6c3ba002e935f8b30ce160cc186c239a
Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>

addons/web/static/src/scss/ribbon.scss

@@ -62,3 +62,13 @@
         }
     }
 }
+
+// after ribbon widget there can be field widgets or oe_title which may
+// have widgets on right end, add margin-right so ribbon not overlap on it
+.ribbon {
+    &:not(.o_invisible_modifier) {
+        ~ .oe_title, ~ .o_field_widget {
+            margin-right: 100px;
+        }
+    }
+}