[IMP] web_editor: review snippets thumbs design

Part of https://github.com/odoo/odoo/pull/55089
task-2157252

Co-authored-by: qsm-odoo <qsm@odoo.com>

1 files changed, 6 insertions, 15 deletions

diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index fbf49e1db67..4250f8c97e5 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -71,11 +71,10 @@ body.editor_enable.editor_has_snippets {
 
         .oe_snippet_thumbnail_img {
             width: 100%;
-            height: 0;
-            padding-bottom: 75%;
-            background-size: cover;
+            height: 60px;
+            background-repeat: no-repeat;
+            background-size: contain;
             background-position: center center;
-            text-align: center;
             overflow: hidden;
         }
 
@@ -160,16 +159,12 @@ body.editor_enable.editor_has_snippets {
         }
 
         .o_panel_body {
+            display: flex; // Needed for too long snippet names
+            flex-wrap: wrap;
             margin-left: -$o-we-sidebar-blocks-content-snippet-spacing;
 
-            &::after {
-                content: "";
-                display: table;
-                clear: left;
-            }
-
             > .oe_snippet {
-                float: left;
+                flex: 0 0 auto;
                 width: percentage(1 / 3);
                 background-clip: padding-box;
                 border-left: $o-we-sidebar-blocks-content-snippet-spacing solid transparent;
@@ -180,10 +175,6 @@ body.editor_enable.editor_has_snippets {
                 cursor: copy;
                 cursor: grab;
 
-                &:nth-child(3n+1) {
-                    clear: left;
-                }
-
                 .oe_snippet_thumbnail_title {
                     display: block;
                     padding: $o-we-sidebar-blocks-content-spacing / 2;