[IMP] web_editor, website: preview container width on hover

Preview the boundaries of container elements when hovering over the 3
width options.

Part of https://github.com/odoo/odoo/pull/46503
task-2194309

addons/web_editor/static/src/scss/wysiwyg_snippets.scss

@@ -1118,3 +1118,8 @@ body.editor_enable.editor_has_snippets {
     opacity: 0;
     animation: fadeInDownSmall 700ms forwards;
 }
+
+// CONTAINER PREVIEW
+.o_container_preview {
+    outline: 2px dashed $o-we-handles-accent-color;
+}

addons/website/static/src/js/editor/snippets.options.js

@@ -1831,6 +1831,31 @@ options.registry.CoverProperties = options.Class.extend({
     },
 });
 
+options.registry.ContainerWidth = options.Class.extend({
+    /**
+     * @override
+     */
+    cleanForSave: function () {
+        this.$target.removeClass('o_container_preview');
+    },
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    selectClass: async function (previewMode, widgetValue, params) {
+        await this._super(...arguments);
+        if (previewMode === 'reset') {
+            this.$target.removeClass('o_container_preview');
+        } else if (previewMode) {
+            this.$target.addClass('o_container_preview');
+        }
+    },
+});
+
 /**
  * Allows snippets to be moved before the preceding element or after the following.
  */

addons/website/views/snippets/snippets.xml

@@ -466,7 +466,7 @@
     </div>
 
     <!-- Stretch section -->
-    <div data-selector="section"
+    <div data-js="ContainerWidth" data-selector="section"
         data-target="> .container, > .container-fluid, > .o_container_small">
         <we-select string="Content Width">
             <we-button data-select-class="container-fluid">Full</we-button>