From bf0ee36713c1f16ebcf18841739b1d8f4e352902 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Fri, 19 Sep 2025 11:43:12 +0200
Subject: [PATCH] MDL-86704 theme_boost: Fix modchooser height on small screens

---
 public/theme/boost/scss/moodle/modchooser.scss | 4 ++++
 public/theme/boost/style/moodle.css            | 1 +
 public/theme/classic/style/moodle.css          | 1 +
 3 files changed, 6 insertions(+)

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 {