Adjust styling for copy node button

Author: louispt1

app/assets/stylesheets/inspect/node.css

@@ -12,9 +12,13 @@
 }
 
 .page-header h1 {
-  align-items: center;
-  display: flex;
-  gap: 0.5rem;
+  display: block;
+  word-break: break-word;
+}
+
+.page-header h1 span[data-clipboard-target="source"] {
+  display: inline;
+  margin-right: 0.25rem;
 }
 
 .page-header button.copy {
@@ -26,9 +30,10 @@
   display: inline-flex;
   font-weight: 500;
   gap: 0.25rem;
-  margin: -0.25rem 0 -0.25rem 0.25rem;
-  padding: 0.25rem 0.5rem;
+  margin: -0.25rem 0 -0.25rem 0;
+  padding: 0rem 0rem;
   transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
+  vertical-align: middle;
 }
 
 .page-header button.copy:hover {
@@ -47,6 +52,7 @@
   display: inline-flex;
   font-weight: 500;
   gap: 0.25rem;
+  vertical-align: middle;
 }
 
 .node-edges > tbody > tr > td {

app/views/inspect/nodes/show.html.haml

@@ -14,7 +14,7 @@
       %h1{ data: { controller: 'clipboard' } }
         %span{ data: { clipboard_target: 'source' } }= node_key
         %button.copy{ data: { action: 'clipboard#copy', clipboard_target: 'button' }, aria: { label: 'Copy node key' } }
-          = inline_svg 'hero/20/duplicate.svg', class: 'w-5 h-5'
+          = inline_svg 'hero/20/duplicate.svg', style: 'width: 2rem; height: 2rem;'
         .copied.hidden{ data: { clipboard_target: 'notice' } }
           = inline_svg 'hero/20/circle-check.svg', class: 'w-4 h-4'
       .controls