From e63c2adca028659aa75031ff5394df4f3159ece1 Mon Sep 17 00:00:00 2001
From: luvi <luvi@odoo.com>
Date: Mon, 12 Sep 2022 08:22:47 +0000
Subject: [PATCH] [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>
---
 .../fields/copy_clipboard/copy_clipboard_field.scss      | 9 ++++++++-
 .../views/fields/copy_clipboard/copy_clipboard_field.xml | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

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>