From 6345fcb8f2d1770aa64f3e88c8700ce928117cd3 Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Wed, 27 Jun 2018 11:31:55 +0100
Subject: [PATCH] Fix incorrectly positioned copy button on `<pre>` blocks

---
 res/css/views/rooms/_EventTile.scss          |  9 +++++++--
 src/components/views/messages/TextualBody.js | 13 ++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 80d2cd3418..d95ed2ded0 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -400,6 +400,12 @@ limitations under the License.
     color: #333;
 }
 
+.mx_EventTile_pre_container {
+    // For correct positioning of _copyButton (See TextualBody)
+    position: relative;
+}
+
+// Inserted adjacent to <pre> blocks, (See TextualBody)
 .mx_EventTile_copyButton {
     position: absolute;
     display: inline-block;
@@ -413,7 +419,6 @@ limitations under the License.
 }
 
 .mx_EventTile_body pre {
-    position: relative;
     border: 1px solid transparent;
 }
 
@@ -422,7 +427,7 @@ limitations under the License.
     border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
 }
 
-.mx_EventTile_body pre:hover .mx_EventTile_copyButton
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton
 {
     visibility: visible;
 }
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 20cf2b69f4..2e5fe2aabc 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -340,7 +340,18 @@ module.exports = React.createClass({
                 }, false);
                 e.target.onmouseleave = close;
             };
-            p.appendChild(button);
+
+            // Wrap a div around <pre> so that the copy button can be correctly positioned
+            // when the <pre> overflows and is scrolled horizontally.
+            const div = document.createElement("div");
+            div.className = "mx_EventTile_pre_container";
+
+            // Insert containing div in place of <pre> block
+            p.parentNode.replaceChild(div, p);
+
+            // Append <pre> block and copy button to container
+            div.appendChild(p);
+            div.appendChild(button);
         });
     },