fix: version column resize when clipboard icon appears (pact-foundation#292)

Use invisibility style to preserve clipboard icon space

Author: tancnle

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

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"}

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