[FIX] web: notebook tab headers container

This commit adds a wrapper element around the form view's notebook
tabs headers to allow the use of `overflow` and make it scrollable (e.g.
on smaller screens) without breaking the tabs' styling (e.g. the bottom
border).

This commit fixes an issue introduced by odoo/enterprise@e07aafbe6f.

closes odoo/odoo#43843

X-original-commit: 967777793cf2a7591ef3d9325497b105eb86577c
Related: odoo/enterprise#7906
Signed-off-by: Pierre Paridans <pparidans@users.noreply.github.com>

addons/web/static/src/js/views/form/form_renderer.js

@@ -249,7 +249,7 @@ var FormRenderer = BasicRenderer.extend({
             var $notebook = $(this);
             var name = $notebook.data('name');
             if (name in state) {
-                var $page = $notebook.find('> ul > li').eq(state[name]);
+                var $page = $notebook.find('> .o_notebook_headers > .nav-tabs > .nav-item').eq(state[name]);
                 if (!$page.hasClass('o_invisible_modifier')) {
                     $page.find('a[data-toggle="tab"]').click();
                 }
@@ -338,7 +338,6 @@ var FormRenderer = BasicRenderer.extend({
         }
     },
     /**
-            excludedElements: ".o_notebook .nav.nav-tabs",
      * @private
      * @param {string} name
      * @returns {string}
@@ -901,9 +900,10 @@ var FormRenderer = BasicRenderer.extend({
                 },
             });
         });
+        var $notebookHeaders = $('<div class="o_notebook_headers">').append($headers);
         var $notebook = $('<div class="o_notebook">')
                 .data('name', node.attrs.name || '_default_')
-                .append($headers, $pages);
+                .append($notebookHeaders, $pages);
         this._registerModifiers(node, this.state, $notebook);
         this._handleAttributes($notebook, node);
         return $notebook;