diff --git a/lib/editor/tiny/styles.css b/lib/editor/tiny/styles.css
index f4508b8e45d..bbca493c270 100644
--- a/lib/editor/tiny/styles.css
+++ b/lib/editor/tiny/styles.css
@@ -21,3 +21,15 @@
 .tox.tox-tinymce .tox-toolbar__group {
     padding-right: 0;
 }
+
+/* Prevent navbar obscuring modal content (ignores fullscreen). */
+.tox.tox-tinymce:not(.tox-fullscreen) + .tox .tox-dialog-wrap {
+    padding-top: var(--navbar-height);
+}
+
+/* Modify Tiny's max-height calculation here to factor in navbar height on small viewports (ignores fullscreen). */
+@media only screen and (max-width: 767px) {
+    body:not(.tox-force-desktop) .tox.tox-tinymce:not(.tox-fullscreen) + .tox .tox-dialog-wrap .tox-dialog {
+        max-height: calc((100vh - 8px * 2) - var(--navbar-height)) !important; /* stylelint-disable-line declaration-no-important */
+    }
+}
diff --git a/theme/boost/scss/moodle/navbar.scss b/theme/boost/scss/moodle/navbar.scss
index 12dade818b4..92bd367bf7d 100644
--- a/theme/boost/scss/moodle/navbar.scss
+++ b/theme/boost/scss/moodle/navbar.scss
@@ -169,3 +169,8 @@
 .pagelayout-embedded #page {
     margin-top: 0;
 }
+
+// Make navbar height available for non-sass use.
+:root {
+    --navbar-height: #{$navbar-height};
+}
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 3d0dc2979de..804021cb2e6 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -36974,6 +36974,10 @@ div.editor_atto_toolbar button .icon {
   margin-top: 0;
 }
 
+:root {
+  --navbar-height: 60px;
+}
+
 /**
 * Reportbuilder.
 */
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 8abe435b310..50d36935518 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -36908,6 +36908,10 @@ div.editor_atto_toolbar button .icon {
   margin-top: 0;
 }
 
+:root {
+  --navbar-height: 50px;
+}
+
 /**
 * Reportbuilder.
 */