From d2280a09ef0115ff6a866f7863a793f88cf94eac Mon Sep 17 00:00:00 2001
From: 81reap <prayag.bhakar@gmail.com>
Date: Fri, 30 Oct 2026 18:54:51 -0400
Subject: [PATCH] fix(modal) :: apply `height` to the model's content

The `height` of the modal component sets the height of its content. Overflow content scrolls.

Fixes #1046

Assisted-By :: Claude Opus 5.5
---
 CHANGELOG.md                                           | 2 ++
 examples/official-site/sqlpage/migrations/63_modal.sql | 2 +-
 sqlpage/templates/modal.handlebars                     | 3 ++-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e850bce..38edfa1b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,8 @@
 
 - Each item of the tracking component accepts a `link`. ([#900](https://github.com/sqlpage/SQLPage/issues/900))
 
+- The `height` of the modal component sets the height of its content. Overflow content scrolls. ([#1046](https://github.com/sqlpage/SQLPage/issues/1046))
+
 - Custom components can call inline partials inside `each_row` and after it, when the partials are defined before `each_row`. ([#846](https://github.com/sqlpage/SQLPage/issues/846))
 
 ## v0.47.0 (2026-10-15)
diff --git a/examples/official-site/sqlpage/migrations/63_modal.sql b/examples/official-site/sqlpage/migrations/63_modal.sql
index 3154007c..308e40e6 100644
--- a/examples/official-site/sqlpage/migrations/63_modal.sql
+++ b/examples/official-site/sqlpage/migrations/63_modal.sql
@@ -18,7 +18,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('small','Indicates that the modal box has a reduced width.','BOOLEAN',TRUE,TRUE),
     ('embed','Embed remote content in an iframe.','TEXT',TRUE,TRUE),
     ('embed_mode','Use "iframe" to display embedded content within an iframe.','TEXT',TRUE,TRUE),
-    ('height','Height of the embedded content.','INTEGER',TRUE,TRUE),
+    ('height','Height of the modal content, in pixels. Overflow content scrolls.','INTEGER',TRUE,TRUE),
     ('allow','For embedded content, this attribute specifies the features or permissions that can be used.','TEXT',TRUE,TRUE),
     ('sandbox','For embedded content, this attribute specifies the security restrictions on the loaded content.','TEXT',TRUE,TRUE),
     ('style','Applies CSS styles to the embedded content.','TEXT',TRUE,TRUE)
diff --git a/sqlpage/templates/modal.handlebars b/sqlpage/templates/modal.handlebars
index d82d3e9d..53bd2d73 100644
--- a/sqlpage/templates/modal.handlebars
+++ b/sqlpage/templates/modal.handlebars
@@ -10,7 +10,8 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{default (default close_label close) "close"}}"></button>
             </div>
             <div class="modal-body">
-                <div class="card bg-transparent border-0"
+                <div class="card bg-transparent border-0{{#if height}} overflow-auto{{/if}}"
+                    {{~#if height}} style="height: {{height}}px"{{/if~}}
                     {{~#if (and embed (ne embed_mode "iframe"))}} data-pre-init="card" data-embed="{{embed}}"{{/if ~}}
                 >
                     <div class="card-body p-0">