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
 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 
 so that the copy button can be correctly positioned
+            // when the 
 overflows and is scrolled horizontally.
+            const div = document.createElement("div");
+            div.className = "mx_EventTile_pre_container";
+
+            // Insert containing div in place of 
 block
+            p.parentNode.replaceChild(div, p);
+
+            // Append 
 block and copy button to container
+            div.appendChild(p);
+            div.appendChild(button);
         });
     },