From 6ecf0f4ca4159c473c2e51106800205505a6c2cb Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Fri, 12 Jan 2024 13:23:28 +0100
Subject: [PATCH] :bug: Fix copy button cropped

---
 .../styles/common/refactor/basic-rules.scss   |  4 --
 .../styles/common/refactor/mixins.scss        |  3 +-
 .../app/main/ui/components/copy_button.cljs   |  2 +-
 .../app/main/ui/components/copy_button.scss   | 66 ++++++++++++-------
 .../ui/viewer/inspect/attributes/common.scss  |  5 +-
 .../ui/viewer/inspect/attributes/text.cljs    |  3 +-
 6 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss
index b4a5f2481..0b120e9e5 100644
--- a/frontend/resources/styles/common/refactor/basic-rules.scss
+++ b/frontend/resources/styles/common/refactor/basic-rules.scss
@@ -769,10 +769,6 @@
   @include titleTipography;
   color: var(--color-foreground-primary);
   text-align: left;
-  display: grid;
-  grid-template-columns: 1fr 22px;
-  grid-template-areas: "name button";
-  width: 100%;
   margin: 0;
   padding: 0;
   height: fit-content;
diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss
index c2f2ce756..856d6ae03 100644
--- a/frontend/resources/styles/common/refactor/mixins.scss
+++ b/frontend/resources/styles/common/refactor/mixins.scss
@@ -97,8 +97,7 @@
   color: var(--menu-foreground-color);
 }
 
-@mixin copyWrapper {
-  @include flexColumn;
+@mixin copyWrapperBase {
   position: relative;
   min-height: $s-32;
   width: $s-156;
diff --git a/frontend/src/app/main/ui/components/copy_button.cljs b/frontend/src/app/main/ui/components/copy_button.cljs
index b0e09e246..909b42abc 100644
--- a/frontend/src/app/main/ui/components/copy_button.cljs
+++ b/frontend/src/app/main/ui/components/copy_button.cljs
@@ -25,7 +25,7 @@
          (let [sub (timers/schedule 1000 #(reset! just-copied false))]
            ;; On unmount we dispose the timer
            #(rx/-dispose sub)))))
-    [:button {:class (dm/str class " " (stl/css-case :copy-button true
+    [:button {:class (dm/str class " " (stl/css-case :copy-button  (not (some? children))
                                                      :copy-wrapper (some? children)))
               :on-click #(when-not @just-copied
                            (reset! just-copied true)
diff --git a/frontend/src/app/main/ui/components/copy_button.scss b/frontend/src/app/main/ui/components/copy_button.scss
index f13f91487..1e07f6455 100644
--- a/frontend/src/app/main/ui/components/copy_button.scss
+++ b/frontend/src/app/main/ui/components/copy_button.scss
@@ -10,7 +10,7 @@
   @include buttonStyle;
   @include flexCenter;
   height: $s-32;
-  width: $s-28;
+  width: $s-32;
   border: $s-1 solid transparent;
   border-radius: $br-8;
   background-color: transparent;
@@ -46,32 +46,50 @@
       stroke: var(--button-tertiary-foreground-color-active);
     }
   }
+}
 
-  &.copy-wrapper {
-    @include copyWrapper;
-    height: fit-content;
-    text-align: left;
-    .icon-btn {
-      position: absolute;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      top: 0;
-      right: 0;
-      height: 32px;
-      width: 28px;
-      svg {
-        @extend .button-icon-small;
-        display: none;
-      }
+.copy-wrapper {
+  @include buttonStyle;
+  @include copyWrapperBase;
+  display: grid;
+  grid-template-columns: 1fr $s-24;
+  grid-template-areas: "name button";
+  width: 100%;
+  height: fit-content;
+  text-align: left;
+  .icon-btn {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    right: 0;
+    height: $s-32;
+    width: $s-32;
+    svg {
+      @extend .button-icon-small;
+      display: none;
     }
-    &:hover {
-      .icon-btn {
-        svg {
-          display: flex;
-          stroke: var(--button-tertiary-foreground-color-active);
-        }
+  }
+  &:hover {
+    .icon-btn {
+      svg {
+        display: flex;
+        stroke: var(--button-tertiary-foreground-color-active);
       }
     }
   }
+
+  &:hover {
+    background-color: var(--color-background-tertiary);
+    color: var(--color-foreground-primary);
+    border: $s-1 solid var(--color-background-tertiary);
+  }
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    border: $s-1 solid var(--button-tertiary-border-color-focus);
+    background-color: transparent;
+    color: var(--button-tertiary-foreground-color-focus);
+  }
 }
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
index b95541732..bb33fa99c 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
@@ -89,12 +89,13 @@
 
 .color-info,
 .color-row-copy-btn {
-  @include copyWrapper;
+  display: flex;
+  max-width: $s-144;
 }
 
 .first-row {
   display: grid;
-  grid-template-columns: 1fr $s-20;
+  grid-template-columns: 1fr $s-24;
   grid-template-areas: "name button";
   height: fit-content;
   width: 100%;
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs
index 66db41c7d..f3f817397 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs
@@ -80,7 +80,8 @@
         [:div {:class (stl/css :global/attr-label)}
          (tr "inspect.attributes.typography")]
         [:div {:class (stl/css :global/attr-value)}
-         [:& copy-button {:data (copy-style-data typography :font-family :font-weight :font-style)}
+         [:& copy-button {:data (copy-style-data typography :font-family :font-weight :font-style)
+                          :class (stl/css :copy-btn-wrapper)}
           [:div {:class (stl/css :button-children)} (:name typography)]]]])
 
      (when (:font-id style)