diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 429ac7ed4b..5fc7a5f04b 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -493,7 +493,6 @@ $left-gutter: 64px;
         // https://github.com/vector-im/vector-web/issues/754
         overflow-x: overlay;
         overflow-y: visible;
-        max-height: 30vh;
     }
 
     code {
@@ -502,6 +501,12 @@ $left-gutter: 64px;
     }
 }
 
+.mx_EventTile_content_collapsedCode {
+    pre {
+        max-height: 30vh;
+    }
+}
+
 .mx_EventTile:hover .mx_EventTile_body pre,
 .mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre {
     border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 8f153e48e9..ce11e63026 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -35,6 +35,7 @@ import {isPermalinkHost} from "../../../utils/permalinks/Permalinks";
 import {toRightOf} from "../../structures/ContextMenu";
 import {copyPlaintext} from "../../../utils/strings";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import classNames from "classnames";
 
 export default class TextualBody extends React.Component {
     static propTypes = {
@@ -69,6 +70,7 @@ export default class TextualBody extends React.Component {
 
             // track whether the preview widget is hidden
             widgetHidden: false,
+            codeBlockExpanded: SettingsStore.getValue("expandCodeByDefault"),
         };
     }
 
@@ -434,6 +436,12 @@ export default class TextualBody extends React.Component {
             });
         }
 
+        const defaultCaseClasses = classNames({
+            mx_MTextBody: true,
+            mx_EventTile_content: true,
+            mx_EventTile_content_collapsedCode: !this.state.codeBlockExpanded,
+        });
+
         switch (content.msgtype) {
             case "m.emote":
                 return (
@@ -459,7 +467,7 @@ export default class TextualBody extends React.Component {
                 );
             default: // including "m.text"
                 return (
-                    <span className="mx_MTextBody mx_EventTile_content">
+                    <span className={defaultCaseClasses}>
                         { body }
                         { widgets }
                     </span>