From 91d1f05f7425490c7c082ee7d0481b97c314f9b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Dock=C3=A8s?= <jerome@dockes.org>
Date: Tue, 24 Sep 2024 15:20:42 +0200
Subject: [PATCH] align copy buttons to flex-start + always visible (#1086)

* align copy buttons to flex-start + always visible

* move copybuttons on the left
---
 skrub/_reporting/_data/templates/buttons.html |  2 +-
 .../_reporting/_data/templates/copybutton.css | 39 +++++++++++--------
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/skrub/_reporting/_data/templates/buttons.html b/skrub/_reporting/_data/templates/buttons.html
index 0e3c5b953..7f8ed476d 100644
--- a/skrub/_reporting/_data/templates/buttons.html
+++ b/skrub/_reporting/_data/templates/buttons.html
@@ -1,6 +1,6 @@
 {% macro copybutton(target) %}
 <button
-    class="copybutton"
+    class="copybutton copybutton-left"
     type="button"
     onclick="copyButtonClick(event)"
     data-target-id="{{ target }}">
diff --git a/skrub/_reporting/_data/templates/copybutton.css b/skrub/_reporting/_data/templates/copybutton.css
index 8f862cc62..68084e8af 100644
--- a/skrub/_reporting/_data/templates/copybutton.css
+++ b/skrub/_reporting/_data/templates/copybutton.css
@@ -23,19 +23,32 @@
 }
 
 .copybutton {
-    margin-left: -2rem;
+    margin: 1px;
     min-width: 2rem;
-    display: none;
+    min-height: calc(1.8rem - 4px);
+    display: inline-block;
     padding: var(--micro);
     padding-left: var(--tiny);
     padding-right: var(--tiny);
     border: none;
-    background: var(--lightg);
     position: relative;
+    align-self: flex-start;
 }
 
-.copybutton[data-show-checkmark]{
-    display: inline-block;
+.copybutton-left {
+    order: -1;
+}
+
+.copybutton {
+    background: #e0e0e0;
+}
+
+.copybutton:hover {
+    background: #eee;
+}
+
+.copybutton:active {
+    background: #cccccc;
 }
 
 .copybutton:not([data-show-checkmark]) > :not(:first-child) {
@@ -53,22 +66,16 @@
     padding: 5px;
     border-radius: var(--radius, 5px);
     position: absolute;
-    right: calc(100% + 5px);
-    top: 3px;
+    top: 1px;
     margin: 0;
+    right: calc(100% + 5px);
 }
 
-.box:hover .copybutton {
-    display: inline-block;
-    background: var(--lightg);
-}
-
-.box:hover .copybutton:hover {
-    display: inline-block;
-    background: var(--mediumg);
+.copybutton-left .copied-message {
+    left: calc(100% + 5px);
+    right: auto;
 }
 
-
 [data-shows-placeholder] {
     color: #777777;
 }