From 32239b04aa84657f0485925749f4d65999f68477 Mon Sep 17 00:00:00 2001
From: Diego Medina <diegomedina24@gmail.com>
Date: Wed, 13 Apr 2022 10:45:38 -0400
Subject: [PATCH] fix: improve the alerts & reports modal layout on small
 screens (#19294)

---
 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 119cb50fbce3..b33981e72100 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 6d87acfa484a..04398a3582fc 100644
--- a/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx
+++ b/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx
@@ -154,6 +154,9 @@ const DEFAULT_ALERT = {
 };
 
 const StyledModal = styled(Modal)`
+  max-width: 1200px;
+  width: 100%;
+
   .ant-modal-body {
     overflow: initial;
   }
@@ -166,7 +169,6 @@ const StyledIcon = (theme: SupersetTheme) => css`
 
 const StyledSectionContainer = styled.div`
   display: flex;
-  min-width: 1000px;
   flex-direction: column;
 
   .header-section {
@@ -1248,6 +1250,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
               <TimezoneSelector
                 onTimezoneChange={onTimezoneChange}
                 timezone={currentAlert?.timezone}
+                minWidth="100%"
               />
             </div>
             <StyledSectionTitle>