diff --git a/public/theme/boost/scss/moodle/modchooser.scss b/public/theme/boost/scss/moodle/modchooser.scss
index 91827ae5f72..413457bceac 100644
--- a/public/theme/boost/scss/moodle/modchooser.scss
+++ b/public/theme/boost/scss/moodle/modchooser.scss
@@ -38,6 +38,10 @@
 
             @include media-breakpoint-up(sm) {
                 height: 640px;
+
+                // Ensure the modal content does not exceed the viewport height.
+                // The calculation uses the modal margin variable and the height of the modal header and footer.
+                max-height: calc(100vh - var(--#{$prefix}modal-margin) * 2 - 9rem);
             }
         }
 
diff --git a/public/theme/boost/style/moodle.css b/public/theme/boost/style/moodle.css
index f79aa824ee8..3af6e34d730 100644
--- a/public/theme/boost/style/moodle.css
+++ b/public/theme/boost/style/moodle.css
@@ -31725,6 +31725,7 @@ table.calendartable caption {
 @media (min-width: 576px) {
   .modchooser.modal-dialog .modal-body .carousel-item {
     height: 640px;
+    max-height: calc(100vh - var(--bs-modal-margin) * 2 - 9rem);
   }
 }
 .modchooser.modal-dialog .modal-body .loading-icon {
diff --git a/public/theme/classic/style/moodle.css b/public/theme/classic/style/moodle.css
index 0ab297d187b..10faebf843e 100644
--- a/public/theme/classic/style/moodle.css
+++ b/public/theme/classic/style/moodle.css
@@ -31725,6 +31725,7 @@ table.calendartable caption {
 @media (min-width: 576px) {
   .modchooser.modal-dialog .modal-body .carousel-item {
     height: 640px;
+    max-height: calc(100vh - var(--bs-modal-margin) * 2 - 9rem);
   }
 }
 .modchooser.modal-dialog .modal-body .loading-icon {