Fix spacing issues in Contact Points and Templates tabs
Add proper top spacing to Contact Points and Notification Templates
tabs to match the spacing pattern used in Notification Policies.
Changes:
- Wrap ContactPointsTab content in Stack with gap={1}
- Wrap NotificationTemplatesTab content in Stack with gap={1}
- This adds consistent spacing between the tabs and the search/filter
sections, matching the UX pattern in Notification Policies
Fixes visual regression where search boxes were directly touching
the tab bar with no spacing.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.5
parent
6395a753d8
commit
dee9bc8fb9
@@ -101,7 +101,7 @@ const ContactPointsTab = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack direction="column" gap={1}>
|
||||
{/* TODO we can add some additional info here with a ToggleTip */}
|
||||
<Stack direction="row" alignItems="end" justifyContent="space-between">
|
||||
<ContactPointsFilter />
|
||||
@@ -150,7 +150,7 @@ const ContactPointsTab = () => {
|
||||
<GlobalConfigAlert alertManagerName={selectedAlertmanager!} />
|
||||
)}
|
||||
{ExportDrawer}
|
||||
</>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -160,7 +160,7 @@ const NotificationTemplatesTab = () => {
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack direction="column" gap={1}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between">
|
||||
<Text variant="body" color="secondary">
|
||||
<Trans i18nKey="alerting.notification-templates-tab.create-notification-templates-customize-notifications">
|
||||
@@ -181,7 +181,7 @@ const NotificationTemplatesTab = () => {
|
||||
)}
|
||||
</Stack>
|
||||
<NotificationTemplates />
|
||||
</>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user