diff --git a/client/src/App/App.styles.scss b/client/src/App/App.styles.scss index 1aca1eecb..24f641873 100644 --- a/client/src/App/App.styles.scss +++ b/client/src/App/App.styles.scss @@ -512,7 +512,52 @@ .esignature-embed { -width: 100%; -height: 100%; -border-width: 0; -} \ No newline at end of file + display: block; + width: 100%; + height: 100%; + border-width: 0; +} + +.esignature-modal { + .ant-modal { + top: 16px; + max-width: calc(100vw - 32px); + padding-bottom: 0; + } + + .ant-modal-content { + display: flex; + flex-direction: column; + max-height: calc(100vh - 32px); + } + + .ant-modal-body { + flex: 1 1 auto; + min-height: 0; + } +} + +.esignature-modal-frame { + width: 100%; + height: calc(100vh - 150px); + min-height: 320px; + overflow: hidden; +} + +@media (max-width: 768px), (max-height: 560px) { + .esignature-modal { + .ant-modal { + top: 8px; + max-width: calc(100vw - 16px); + } + + .ant-modal-content { + max-height: calc(100vh - 16px); + } + } + + .esignature-modal-frame { + height: calc(100vh - 132px); + min-height: 0; + } +} diff --git a/client/src/components/esignature-modal/esignature-modal.container.jsx b/client/src/components/esignature-modal/esignature-modal.container.jsx index 09ce49ad6..16e746b72 100644 --- a/client/src/components/esignature-modal/esignature-modal.container.jsx +++ b/client/src/components/esignature-modal/esignature-modal.container.jsx @@ -76,9 +76,11 @@ export function EsignatureModalContainer({ esignatureModal, toggleModalVisible, okButtonProps={{ loading: distributing }} okText={t("esignature.actions.distribute")} destroyOnHidden - width={"80%"} + width="calc(100vw - 32px)" + wrapClassName="esignature-modal" + styles={{ body: { overflow: "hidden", padding: 0 } }} > -