mirror of
https://github.com/apache/superset.git
synced 2024-09-16 02:29:39 -04:00
fix: improve the alerts & reports modal layout on small screens (#19294)
This commit is contained in:
parent
26a0f05759
commit
32239b04aa
@ -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}
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user