[IMP] web: improve copy clipboard design

closes odoo/odoo#101836

X-original-commit: e04afa1836563113402647cf05d957ff7d093d26
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Signed-off-by: Simon Genin (ges@odoo) <ges@odoo.com>

addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.js

@@ -28,7 +28,7 @@ CopyClipboardField.props = {
 export class CopyClipboardButtonField extends CopyClipboardField {
     get copyButtonClassName() {
         const classNames = [super.copyButtonClassName];
-        classNames.push("rounded-3");
+        classNames.push("rounded-2");
         return classNames.join(" ");
     }
 }

addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.scss

@@ -7,6 +7,8 @@
         font-weight: $badge-font-weight;
 
         > span:first-child, a {
+            margin-left: 4px;
+            margin-right: 4px;
             align-self: center;
             text-align: center;
 

addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.xml

@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.CopyClipboardField" owl="1">
-        <div t-if="props.value" class="d-grid rounded-3 overflow-hidden">
+        <div t-if="props.value" class="d-grid rounded-2 overflow-hidden">
             <Field t-props="props"/>
             <CopyButton className="copyButtonClassName" content="props.value" copyText="copyText" successText="successText"/>
         </div>