[superset] branch master updated: fix: improve the alerts & reports modal layout on small screens (#19294)

[rusackas]

This is an automated email from the ASF dual-hosted git repository.

rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 32239b04aa fix: improve the alerts & reports modal layout on small 
screens (#19294)
32239b04aa is described below

commit 32239b04aa84657f0485925749f4d65999f68477
Author: Diego Medina <diegomedin...@gmail.com>
AuthorDate: Wed Apr 13 10:45:38 2022 -0400

    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 119cb50fbc..b33981e721 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 6d87acfa48..04398a3582 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>