[FIX] web: fix style of CopyClipboard fields

This commit improves and fixes the styles used by
CopyClipboard[...] fields. Before this commit, the
char type was not truncated when the text was too
long, and the Copy button appeared centered but not
stretched to the edges of the container. Now, a grid
layout replaces the flex layout, which bring a more
consistent UI.

Text: the text is not cropped but goes to next line
Char/URL: the text is cropped to fit in the space

closes odoo/odoo#99991

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

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;
+            }
         }
     }
 }

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>