From f8fdd02f1c8f402d3b34523b87092135c4c7f054 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 3128283e..a31314af 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,8 @@
 
 - Each card of the card component accepts a `target`, such as `_blank` to open its link in a new tab. ([#820](https://github.com/sqlpage/SQLPage/issues/820))
 
+- 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">