Background color for code and don't collapse space in timeline

resources/qml/Avatar.qml

@@ -38,6 +38,13 @@ Rectangle {
         sourceSize.height: avatar.height
         layer.enabled: true
 
+        MouseArea {
+            id: mouseArea
+
+            anchors.fill: parent
+            onClicked: TimelineManager.openImageOverlay(TimelineManager.timeline.avatarUrl(userid), TimelineManager.timeline.data.id)
+        }
+
         layer.effect: OpacityMask {
 
             maskSource: Rectangle {
@@ -49,12 +56,6 @@ Rectangle {
 
         }
 
-        MouseArea {
-            id: mouseArea
-
-            anchors.fill: parent
-            onClicked: TimelineManager.openImageOverlay(TimelineManager.timeline.avatarUrl(userid), TimelineManager.timeline.data.id)
-        }
     }
 
     Rectangle {

resources/qml/delegates/TextMessage.qml

@@ -4,7 +4,7 @@ import im.nheko 1.0
 MatrixText {
     property string formatted: model.data.formattedBody
 
-    text: "<style type=\"text/css\">a { color:" + colors.link + ";}</style>" + formatted.replace("<pre>", "<pre style='white-space: pre-wrap'>")
+    text: "<span style='white-space: pre-wrap'><style type=\"text/css\">a { color:" + colors.link + ";}\ncode { background-color: " + colors.alternateBase + ";}</style>" + formatted.replace("<pre>", "<pre style='white-space: pre-wrap; background-color: " + colors.alternateBase + "'>") + "</span>"
     width: parent ? parent.width : undefined
     height: isReply ? Math.round(Math.min(timelineRoot.height / 8, implicitHeight)) : undefined
     clip: isReply