Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: modal and App viewer header overlap (#15093)

Browse Source 
* modal positions calculations on App View mode

* using css variables to compute modal offsets
This commit is contained in:
rahulramesha 2022-07-12 21:13:26 +05:30 committed by GitHub
parent 2bcc630435
commit 4dc3ed481c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/src/pages/AppViewer/index.tsx
View File

@ -58,6 +58,7 @@ const AppViewerBody = styled.section<{
align-items: stretch; align-items: stretch;
justify-content: flex-start; justify-content: flex-start;
height: calc(100vh - ${({ headerHeight }) => headerHeight}px); height: calc(100vh - ${({ headerHeight }) => headerHeight}px);
--view-mode-header-height: ${({ headerHeight }) => headerHeight}px;
`; `;
const ContainerWithComments = styled.div` const ContainerWithComments = styled.div`

9
app/client/src/widgets/ModalWidget/component/index.tsx
View File

@ -48,10 +48,13 @@ const Container = styled.div<{
z-index: ${(props) => props.zIndex || 2 - 1}; z-index: ${(props) => props.zIndex || 2 - 1};
} }
position: fixed; position: fixed;
top: 0; top: var(--view-mode-header-height, 0);
right: 0; right: 0;
bottom: 0; bottom: 0;
height: 100vh; height: ${(props) =>
props.isEditMode
? "100vh"
: `calc(100vh - var(--view-mode-header-height, 0))`};
z-index: ${(props) => props.zIndex}; z-index: ${(props) => props.zIndex};
width: 100%; width: 100%;
display: flex; display: flex;
@ -66,7 +69,7 @@ const Container = styled.div<{
return `95%`; return `95%`;
}}; }};
max-height: 85%; max-height: ${(props) => (props.isEditMode ? "85%" : "95%")};
width: ${(props) => (props.width ? `${props.width}px` : "auto")}; width: ${(props) => (props.width ? `${props.width}px` : "auto")};
height: ${(props) => (props.height ? `${props.height}px` : "auto")}; height: ${(props) => (props.height ? `${props.height}px` : "auto")};
min-height: ${(props) => `${props.minSize}px`}; min-height: ${(props) => `${props.minSize}px`};