fix: improve the alerts & reports modal layout on small screens (#19294)

This commit is contained in:
Diego Medina 2022-04-13 10:45:38 -04:00 committed by GitHub
parent 26a0f05759
commit 32239b04aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 2 deletions

View File

@ -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}

View File

@ -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>