From 188eb6b9ea84d8e6f22eba0e08d8b11251374b59 Mon Sep 17 00:00:00 2001 From: Paul Armstrong Date: Fri, 5 Feb 2021 15:46:17 -0800 Subject: [PATCH] fix(web): relative modal height, top position, and z-indexing --- web/public/index.html | 4 ++-- web/src/components/RelativeModal.jsx | 18 ++++++++++++++---- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/web/public/index.html b/web/public/index.html index 99c4894dc..008438567 100644 --- a/web/public/index.html +++ b/web/public/index.html @@ -14,8 +14,8 @@ -
- +
+ diff --git a/web/src/components/RelativeModal.jsx b/web/src/components/RelativeModal.jsx index 5b7a41d8a..c1ce43fe9 100644 --- a/web/src/components/RelativeModal.jsx +++ b/web/src/components/RelativeModal.jsx @@ -59,7 +59,13 @@ export default function RelativeModal({ className, role = 'dialog', children, on if (top + menuHeight > windowHeight - WINDOW_PADDING) { top = y - menuHeight; } - setPosition({ left, top: top + window.scrollY, width }); + + if (top <= WINDOW_PADDING) { + top = WINDOW_PADDING; + } + + const maxHeight = windowHeight - WINDOW_PADDING * 2 > menuHeight ? null : windowHeight - WINDOW_PADDING * 2; + setPosition({ left, top: top + window.scrollY, width, height: maxHeight }); const focusable = ref.current.querySelector('[tabindex]'); focusable && console.log('focusing'); focusable && focusable.focus(); @@ -76,16 +82,20 @@ export default function RelativeModal({ className, role = 'dialog', children, on const menu = ( -
+
0 ? `min-width: ${position.width}px; top: ${position.top}px; left: ${position.left}px` : '' + position.width > 0 + ? `min-width: ${position.width}px; ${position.height ? `max-height: ${position.height}px;` : ''} top: ${ + position.top + }px; left: ${position.left}px` + : '' } > {children}