[IMP] web_editor: improve link popover

PURPOSE

Simply improve the design of the link popover

SPECIFICATION

- "ellipsis" the link preview instead of wrapping it
- only keep a 0.5rem gap between each of the right icons

Task-2916270

closes odoo/odoo#104964

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>

addons/web_editor/static/src/scss/wysiwyg.scss

@@ -807,7 +807,7 @@ img::selection {
     }
 
     .o_we_url_link {
-        word-break: break-all;
+        width: 100px;
     }
 
     .o_we_full_url {

addons/web_editor/static/src/xml/wysiwyg.xml

@@ -482,14 +482,14 @@
         <span class="mr-2 o_we_preview_favicon"><i class="fa fa-globe"/><img class="align-baseline d-none"/></span>
         <div class="w-100">
             <div class="d-flex">
-                <a href="#" target="_blank" class="o_we_url_link font-weight-bold flex-grow-1" t-esc="widget.href" title="Open in a new tab"/>
-                <a href="#" class="mx-2 o_we_copy_link text-dark" data-toggle="tooltip" data-placement="top" title="Copy Link">
+                <a href="#" target="_blank" class="o_we_url_link font-weight-bold flex-grow-1 text-truncate" t-esc="widget.href" title="Open in a new tab"/>
+                <a href="#" class="mx-1 o_we_copy_link text-dark" data-toggle="tooltip" data-placement="top" title="Copy Link">
                     <i class="fa fa-clone"/>
                 </a>
-                <a href="#" class="mx-2 o_we_edit_link text-dark" data-toggle="tooltip" data-placement="top" title="Edit Link">
+                <a href="#" class="mx-1 o_we_edit_link text-dark" data-toggle="tooltip" data-placement="top" title="Edit Link">
                     <i class="fa fa-edit"/>
                 </a>
-                <a href="#" class="ml-2 o_we_remove_link text-dark" data-toggle="tooltip" data-placement="top" title="Remove Link">
+                <a href="#" class="ml-1 o_we_remove_link text-dark" data-toggle="tooltip" data-placement="top" title="Remove Link">
                     <i class="fa fa-chain-broken"/>
                 </a>
             </div>