From 5aa668e90f68468e30aa42041821e5205b94c526 Mon Sep 17 00:00:00 2001
From: Tan Le <tanle.oz@gmail.com>
Date: Mon, 26 Aug 2019 08:34:52 +1000
Subject: [PATCH] fix: version column resize when clipboard icon appears (#292)

Use invisibility style to preserve clipboard icon space
---
 lib/pact_broker/ui/views/index/show-with-tags.haml | 4 ++--
 lib/pact_broker/ui/views/matrix/show.haml          | 4 ++--
 public/javascripts/clipboard.js                    | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/lib/pact_broker/ui/views/index/show-with-tags.haml b/lib/pact_broker/ui/views/index/show-with-tags.haml
index 6941f4b60..4885981f2 100644
--- a/lib/pact_broker/ui/views/index/show-with-tags.haml
+++ b/lib/pact_broker/ui/views/index/show-with-tags.haml
@@ -41,7 +41,7 @@
             %td.consumer-version-number
               %div.clippable
                 = escape_html(index_item.consumer_version_number)
-                %button.clippy.hidden{ title: "Copy to clipboard" }
+                %button.clippy.invisible{ title: "Copy to clipboard" }
                   %span.glyphicon.glyphicon-copy
               - if index_item.latest?
                 .tag.label.label-success
@@ -60,7 +60,7 @@
             %td.provider-version-number
               %div.clippable
                 = escape_html(index_item.provider_version_number)
-                %button.clippy.hidden{ title: "Copy to clipboard" }
+                %button.clippy.invisible{ title: "Copy to clipboard" }
                   %span.glyphicon.glyphicon-copy
               - index_item.provider_version_latest_tag_names.each do | tag_name |
                 .tag.label.label-primary
diff --git a/lib/pact_broker/ui/views/matrix/show.haml b/lib/pact_broker/ui/views/matrix/show.haml
index a7044fc2a..540dc57a4 100644
--- a/lib/pact_broker/ui/views/matrix/show.haml
+++ b/lib/pact_broker/ui/views/matrix/show.haml
@@ -106,7 +106,7 @@
             %div.clippable
               %a{href: line.consumer_version_number_url}
                 = line.display_consumer_version_number
-              %button.clippy.hidden{ title: "Copy to clipboard" }
+              %button.clippy.invisible{ title: "Copy to clipboard" }
                 %span.glyphicon.glyphicon-copy
             - line.latest_consumer_version_tags.each do | tag |
               .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
@@ -132,7 +132,7 @@
             %div.clippable
               %a{href: line.provider_version_number_url}
                 = line.display_provider_version_number
-              %button.clippy.hidden{ title: "Copy to clipboard" }
+              %button.clippy.invisible{ title: "Copy to clipboard" }
                 %span.glyphicon.glyphicon-copy
             - line.latest_provider_version_tags.each do | tag |
               .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
diff --git a/public/javascripts/clipboard.js b/public/javascripts/clipboard.js
index 5b40f85ef..7013910dd 100644
--- a/public/javascripts/clipboard.js
+++ b/public/javascripts/clipboard.js
@@ -4,7 +4,7 @@
  * @example in Haml
  *     %div.clippable
  *       = Text to be copied
- *       %button.clippy.hidden{ title: "Copy to clipboard" }
+ *       %button.clippy.invisible{ title: "Copy to clipboard" }
  *         %span.glyphicon.glyphicon-copy
  */
 
@@ -17,7 +17,7 @@ function initializeClipper(selector) {
   const elements = $(selector);
 
   elements.hover(function() {
-    $(this).children(".clippy").toggleClass("hidden");
+    $(this).children(".clippy").toggleClass("invisible");
   });
 
   elements