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:
Alejandro Fraenkel
2026-01-12 15:29:05 +01:00
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>
);
};