diff --git a/ui/src/index.css b/ui/src/index.css index 263e689..41192b5 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -249,14 +249,14 @@ div.dialog-after-open > div.dialog-content.maximized { .dx-datagrid-header-panel > .dx-toolbar .dx-toolbar-before, .dx-treelist-header-panel > .dx-toolbar .dx-toolbar-before { - width: 50% !important; - max-width: 50% !important; + width: auto !important; + max-width: none !important; } .dx-datagrid-header-panel > .dx-toolbar .dx-toolbar-after, .dx-treelist-header-panel > .dx-toolbar .dx-toolbar-after { - width: 50% !important; - max-width: 50% !important; + width: auto !important; + max-width: 100% !important; margin-left: auto; text-align: right; white-space: nowrap; diff --git a/ui/src/views/list/Grid.tsx b/ui/src/views/list/Grid.tsx index 89eb2e6..8274d26 100644 --- a/ui/src/views/list/Grid.tsx +++ b/ui/src/views/list/Grid.tsx @@ -251,6 +251,21 @@ const isTouchLikeDevice = () => const isMobileViewport = () => typeof window !== 'undefined' && window.matchMedia?.('(max-width: 767px)').matches +const getEditPopupHeight = (useMobileEditPopup: boolean, isPopupFullScreen: boolean) => + useMobileEditPopup && isPopupFullScreen ? '100%' : 'auto' + +const getEditPopupMaxHeight = ( + useMobileEditPopup: boolean, + isPopupFullScreen: boolean, + configuredHeight?: number, +) => { + if (useMobileEditPopup && isPopupFullScreen) { + return '100%' + } + + return configuredHeight && configuredHeight > 0 ? configuredHeight : '90vh' +} + const Grid = (props: GridProps) => { const { listFormCode, searchParams, isSubForm, level, gridDto: extGridDto } = props const { translate } = useLocalization() @@ -1566,10 +1581,12 @@ const Grid = (props: GridProps) => { width: useMobileEditPopup ? '100%' : gridDto.gridOptions.editingOptionDto?.popup?.width, - height: - useMobileEditPopup && isPopupFullScreen - ? '100%' - : gridDto.gridOptions.editingOptionDto?.popup?.height, + height: getEditPopupHeight(useMobileEditPopup, isPopupFullScreen), + maxHeight: getEditPopupMaxHeight( + useMobileEditPopup, + isPopupFullScreen, + gridDto.gridOptions.editingOptionDto?.popup?.height, + ), position: useMobileEditPopup ? { my: 'top center', diff --git a/ui/src/views/list/Tree.tsx b/ui/src/views/list/Tree.tsx index 6aa8fce..e9d1200 100644 --- a/ui/src/views/list/Tree.tsx +++ b/ui/src/views/list/Tree.tsx @@ -239,6 +239,21 @@ const isTouchLikeDevice = () => const isMobileViewport = () => typeof window !== 'undefined' && window.matchMedia?.('(max-width: 767px)').matches +const getEditPopupHeight = (useMobileEditPopup: boolean, isPopupFullScreen: boolean) => + useMobileEditPopup && isPopupFullScreen ? '100%' : 'auto' + +const getEditPopupMaxHeight = ( + useMobileEditPopup: boolean, + isPopupFullScreen: boolean, + configuredHeight?: number, +) => { + if (useMobileEditPopup && isPopupFullScreen) { + return '100%' + } + + return configuredHeight && configuredHeight > 0 ? configuredHeight : '90vh' +} + const Tree = (props: TreeProps) => { const { listFormCode, searchParams, isSubForm, level, gridDto: extGridDto } = props const { translate } = useLocalization() @@ -1220,9 +1235,12 @@ const Tree = (props: TreeProps) => { width: useMobileEditPopup ? '100%' : gridDto.gridOptions.editingOptionDto?.popup?.width, - height: useMobileEditPopup && isPopupFullScreen - ? '100%' - : gridDto.gridOptions.editingOptionDto?.popup?.height, + height: getEditPopupHeight(useMobileEditPopup, isPopupFullScreen), + maxHeight: getEditPopupMaxHeight( + useMobileEditPopup, + isPopupFullScreen, + gridDto.gridOptions.editingOptionDto?.popup?.height, + ), position: useMobileEditPopup ? { my: 'top center',