From a932cdd30772e89c053d86742d0c0b6ddf719833 Mon Sep 17 00:00:00 2001
From: Diego Medina <diegomedina24@gmail.com>
Date: Mon, 21 Mar 2022 20:25:11 -0300
Subject: [PATCH] fix: improve the alerts & reports modal layout on small
 screens

---
 superset-frontend/src/components/TimezoneSelector/index.tsx | 4 +++-
 superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx | 5 ++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/components/TimezoneSelector/index.tsx b/superset-frontend/src/components/TimezoneSelector/index.tsx
index 119cb50fbce37..b33981e721006 100644
--- a/superset-frontend/src/components/TimezoneSelector/index.tsx
+++ b/superset-frontend/src/components/TimezoneSelector/index.tsx
@@ -104,11 +104,13 @@ const matchTimezoneToOptions = (timezone: string) =>
 export type TimezoneSelectorProps = {
   onTimezoneChange: (value: string) => void;
   timezone?: string | null;
+  minWidth?: string;
 };
 
 export default function TimezoneSelector({
   onTimezoneChange,
   timezone,
+  minWidth = MIN_SELECT_WIDTH, // smallest size for current values
 }: TimezoneSelectorProps) {
   const validTimezone = useMemo(
     () => matchTimezoneToOptions(timezone || moment.tz.guess()),
@@ -125,7 +127,7 @@ export default function TimezoneSelector({
   return (
     <Select
       ariaLabel={t('Timezone selector')}
-      css={{ minWidth: MIN_SELECT_WIDTH }} // smallest size for current values
+      css={{ minWidth }}
       onChange={tz => onTimezoneChange(tz as string)}
       value={validTimezone}
       options={TIMEZONE_OPTIONS}
diff --git a/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx b/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx
index 6323edf3a0ca3..cc2ade21d101c 100644
--- a/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx
+++ b/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx
@@ -153,6 +153,9 @@ const DEFAULT_ALERT = {
 };
 
 const StyledModal = styled(Modal)`
+  max-width: 1200px;
+  width: 100%;
+
   .ant-modal-body {
     overflow: initial;
   }
@@ -165,7 +168,6 @@ const StyledIcon = (theme: SupersetTheme) => css`
 
 const StyledSectionContainer = styled.div`
   display: flex;
-  min-width: 1000px;
   flex-direction: column;
 
   .header-section {
@@ -1242,6 +1244,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
               <TimezoneSelector
                 onTimezoneChange={onTimezoneChange}
                 timezone={currentAlert?.timezone}
+                minWidth="100%"
               />
             </div>
             <StyledSectionTitle>