Skip to content

Commit

Permalink
fix: improve the alerts & reports modal layout on small screens (#19294)
Browse files Browse the repository at this point in the history
  • Loading branch information
diegomedina248 authored Apr 13, 2022
1 parent 26a0f05 commit 32239b0
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 2 deletions.
4 changes: 3 additions & 1 deletion superset-frontend/src/components/TimezoneSelector/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()),
Expand All @@ -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}
Expand Down
5 changes: 4 additions & 1 deletion superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,9 @@ const DEFAULT_ALERT = {
};

const StyledModal = styled(Modal)`
max-width: 1200px;
width: 100%;
.ant-modal-body {
overflow: initial;
}
Expand All @@ -166,7 +169,6 @@ const StyledIcon = (theme: SupersetTheme) => css`

const StyledSectionContainer = styled.div`
display: flex;
min-width: 1000px;
flex-direction: column;
.header-section {
Expand Down Expand Up @@ -1248,6 +1250,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
<TimezoneSelector
onTimezoneChange={onTimezoneChange}
timezone={currentAlert?.timezone}
minWidth="100%"
/>
</div>
<StyledSectionTitle>
Expand Down

0 comments on commit 32239b0

Please sign in to comment.