fix(modal) :: apply height to the model's content

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)

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)

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">