From 4781f1096c4bc2b01a7024f6fefd621ffa50e6bd Mon Sep 17 00:00:00 2001
From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
Date: Tue, 9 Mar 2021 11:27:44 +0530
Subject: [PATCH] Fix: Modal Size gets cut in smaller screens. (#3441)

---
 .../blueprint/ModalComponent.tsx              |  1 +
 app/client/src/widgets/ModalWidget.tsx        | 25 ++++++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
index 3934f18ca7..a5b8d9a06a 100644
--- a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
@@ -26,6 +26,7 @@ const Container = styled.div<{
       justify-content: center;
       align-items: center;
       & .${Classes.OVERLAY_CONTENT} {
+        max-width: 95%;
         width: ${(props) => props.width}px;
         min-height: ${(props) => props.height}px;
         background: white;
diff --git a/app/client/src/widgets/ModalWidget.tsx b/app/client/src/widgets/ModalWidget.tsx
index 44a4a5de0a..59cfd55835 100644
--- a/app/client/src/widgets/ModalWidget.tsx
+++ b/app/client/src/widgets/ModalWidget.tsx
@@ -9,10 +9,13 @@ import {
   WidgetTypes,
   RenderMode,
   GridDefaults,
+  MAIN_CONTAINER_WIDGET_ID,
 } from "constants/WidgetConstants";
 import { generateClassName } from "utils/generators";
 import * as Sentry from "@sentry/react";
 import withMeta, { WithMeta } from "./MetaHOC";
+import { AppState } from "reducers";
+import { getWidget } from "sagas/selectors";
 
 const MODAL_SIZE: { [id: string]: { width: number; height: number } } = {
   MODAL_SMALL: {
@@ -72,6 +75,14 @@ export class ModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
     canEscapeKeyClose: false,
   };
 
+  getModalWidth() {
+    const widthFromOverlay = this.props.mainContainer.rightColumn * 0.95;
+    const defaultModalWidth = MODAL_SIZE[this.props.size].width;
+    return widthFromOverlay < defaultModalWidth
+      ? widthFromOverlay
+      : defaultModalWidth;
+  }
+
   renderChildWidget = (childWidgetData: WidgetProps): ReactNode => {
     childWidgetData.parentId = this.props.widgetId;
     childWidgetData.shouldScrollContents = false;
@@ -82,7 +93,7 @@ export class ModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
     childWidgetData.isVisible = this.props.isVisible;
     childWidgetData.containerStyle = "none";
     childWidgetData.minHeight = MODAL_SIZE[this.props.size].height;
-    childWidgetData.rightColumn = MODAL_SIZE[this.props.size].width;
+    childWidgetData.rightColumn = this.getModalWidth();
     return WidgetFactory.createWidget(childWidgetData, this.props.renderMode);
   };
 
@@ -108,7 +119,7 @@ export class ModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
         <ModalComponent
           isOpen={!!this.props.isVisible}
           onClose={this.closeModal}
-          width={MODAL_SIZE[this.props.size].width}
+          width={this.getModalWidth()}
           height={MODAL_SIZE[this.props.size].height}
           className={`t--modal-widget ${generateClassName(
             this.props.widgetId,
@@ -150,6 +161,7 @@ export interface ModalWidgetProps extends WidgetProps, WithMeta {
   canEscapeKeyClose?: boolean;
   shouldScrollContents?: boolean;
   size: string;
+  mainContainer: WidgetProps;
 }
 
 const mapDispatchToProps = (dispatch: any) => ({
@@ -169,8 +181,15 @@ const mapDispatchToProps = (dispatch: any) => ({
     });
   },
 });
+
+const mapStateToProps = (state: AppState) => {
+  const props = {
+    mainContainer: getWidget(state, MAIN_CONTAINER_WIDGET_ID),
+  };
+  return props;
+};
 export default ModalWidget;
 export const ProfiledModalWidget = connect(
-  null,
+  mapStateToProps,
   mapDispatchToProps,
 )(Sentry.withProfiler(withMeta(ModalWidget)));