Fix misalignment in horizontal Schedule when "Custom" is selected#74749
Merged
olehk-mb merged 1 commit intoMay 27, 2026
Merged
Conversation
Anchor the horizontal Schedule row to the top with align-items: flex-start instead of center, and move the CronExpressionInput's "quartz cron syntax" hint from above to below the input so the cron input aligns with sibling controls in the flex container.
olehk-mb
commented
May 26, 2026
| /> | ||
| )} | ||
|
|
||
| <CustomScheduleInputHint /> |
Contributor
Author
There was a problem hiding this comment.
Hint is now below explain message. I think it makes sense and I slightly prefer it to explain message being below the hint, but I'm open to be persuaded otherwise
olehk-mb
commented
May 26, 2026
| ); | ||
| return ( | ||
| <Text>{jt`Our ${cronSyntaxDocsLink} is a string of 5 fields, starting from minutes, separated by spaces`}</Text> | ||
| <Text>{jt`Our ${cronSyntaxDocsLink} is a string of 5 fields, starting from minutes, separated by spaces.`}</Text> |
Contributor
Author
There was a problem hiding this comment.
This is complete sentence and we seem to use period at the end of such explanations/hints more often than not
chodorowicz
approved these changes
May 27, 2026
chodorowicz
left a comment
chodorowicz
left a comment
Contributor
There was a problem hiding this comment.
Nice! I like the approach with the slight layout change that makes things simpler and IMHO also make the UI cleaner.
olehk-mb
deleted the
gdgt-2369-scheduler-component-can-get-misaligned-with-custom-setting
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes GDGT-2369, UXW-2923: Cron helper text alignment in schedule UI, #73343
Description
This PR fixes alignment of the horizontal Schedule when a custom schedule is selected. The row now anchors to the top with
align-items: flex-startinstead of being vertically centered, and the cron input's "quartz cron syntax" hint moved from above to below the input — together these make the cron input line up with sibling controls in the flex container instead of drifting down.Having the cron hint below the input I think better reflects its purpose — i.e. helping users who are confused by the input. I think most users have heard of cron and recognize it on sight from the example expression we put in the input field, so the explanation only "gets in the way". It's also easier to build visual hierarchy in the horizontal Schedule if the hint is placed below — otherwise we'd need grid/subgrids to align everything, and still introduce layout shifts when the user switches from e.g. hourly to custom cron.
How to verify
/data-studio/transforms/jobs/<id>) and set the schedule to Custom. The Select and the cron input should be vertically aligned at the top — see the screenshot in the linked issue for the before state.CronExpressionInputappears (Admin → Settings → Caching → Model persistence → Custom; admin performance caching strategy; question alert custom schedule), the "quartz cron syntax" hint should now sit below the input rather than above.Demo
Before
After
Checklist