This is an automated email from the ASF dual-hosted git repository.
morningman pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new 58a0c7aba0b [fix](next) make Ask Me modal scrollable and cap its
height (#3694)
58a0c7aba0b is described below
commit 58a0c7aba0bd0eadf80a649b1efc02f9ce591e0e
Author: Mingyu Chen (Rayner) <[email protected]>
AuthorDate: Tue May 19 10:29:38 2026 -0700
[fix](next) make Ask Me modal scrollable and cap its height (#3694)
The Kapa modal centered via injected shadow-DOM CSS had `align-items:
center` with zero vertical padding, so tall content overflowed the
viewport with no way to scroll. Add 2rem top/bottom padding, cap
`.mantine-Modal-content` at `calc(100vh - 4rem)`, and move scrolling to
`.mantine-Modal-body` (flex + overflow-y: auto).
Co-authored-by: Claude Opus 4.7 (1M context) <[email protected]>
---
static/js/custom-script.js | 19 +++++++++++++++++--
1 file changed, 17 insertions(+), 2 deletions(-)
diff --git a/static/js/custom-script.js b/static/js/custom-script.js
index af8159231e7..26c3efa741b 100644
--- a/static/js/custom-script.js
+++ b/static/js/custom-script.js
@@ -14,14 +14,29 @@
// Center the Kapa Ask Me modal vertically. Kapa renders inside a Shadow DOM
// on `#kapa-widget-container`, so light-DOM CSS can't reach it. We inject a
// <style> into the shadow root and re-inject if Kapa rebuilds it.
+//
+// The modal must (a) size to its content when small, (b) cap at viewport
+// minus margin when content is tall, and (c) scroll inside the body — not
+// inside `.mantine-Modal-inner`, which clips the top under `align-items:
+// center` once content exceeds the viewport.
(function centerKapaModal() {
var STYLE_ID = 'doris-kapa-center-modal';
var CSS_TEXT =
'.mantine-Modal-inner{' +
'align-items:center !important;' +
- 'padding-top:0 !important;' +
- 'padding-bottom:0 !important;' +
+ 'padding-top:2rem !important;' +
+ 'padding-bottom:2rem !important;' +
'--modal-y-offset:0 !important;' +
+ '}' +
+ '.mantine-Modal-content{' +
+ 'max-height:calc(100vh - 4rem) !important;' +
+ 'display:flex !important;' +
+ 'flex-direction:column !important;' +
+ '}' +
+ '.mantine-Modal-body{' +
+ 'flex:1 1 auto !important;' +
+ 'min-height:0 !important;' +
+ 'overflow-y:auto !important;' +
'}';
function inject() {
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
