diff --git a/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.scss b/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.scss
index 608d1872712..7913e1e130d 100644
--- a/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.scss
+++ b/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.scss
@@ -1,13 +1,20 @@
 .o_field_CopyClipboardText, .o_field_CopyClipboardURL, .o_field_CopyClipboardChar {
     > div {
+        grid-template-columns: auto min-content;
         border: 1px solid $primary;
         font-size: $font-size-sm;
         color: $o-brand-primary;
         font-weight: $badge-font-weight;
 
         > span:first-child, a {
+            align-self: center;
             text-align: center;
-            flex: auto;
+
+            &:not(.o_field_CopyClipboardText) {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
         }
     }
 }
diff --git a/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.xml b/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.xml
index 53922d53661..6295fce6c95 100644
--- a/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.xml
+++ b/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-flex flex-nowrap align-items-center rounded-3 overflow-hidden justify-content-end">
+        <div t-if="props.value" class="d-grid rounded-3 overflow-hidden">
             <Field t-props="props"/>
             <CopyButton className="`o_btn_${props.type}_copy`" content="props.value" copyText="copyText" successText="successText"/>
         </div>