Fix spacing in Notification Templates tab (legacy mode)

Add proper top margin to TabContent in legacy mode to match the
spacing pattern used in Notification Policies page.

Changes:
- Import css from @emotion/css and useStyles2
- Import GrafanaTheme2 for theme typing
- Create getStyles function with tabContent margin
- Apply className to TabContent in legacy mode rendering
- Matches the pattern used in NotificationPoliciesPage.tsx

This fixes the visual issue where the "Create notification templates"
text was directly touching the tabs above with no spacing in legacy
navigation mode.

🤖 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:32:06 +01:00
co-authored by Claude Sonnet 4.5
parent dee9bc8fb9
commit 774551589b
@@ -1,5 +1,7 @@
import { css } from '@emotion/css';
import { useMemo } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Trans, t } from '@grafana/i18n';
import {
Alert,
@@ -13,6 +15,7 @@ import {
TabContent,
TabsBar,
Text,
useStyles2,
} from '@grafana/ui';
import { contextSrv } from 'app/core/services/context_srv';
import { shouldUseK8sApi } from 'app/features/alerting/unified/utils/k8s/utils';
@@ -204,6 +207,7 @@ const useTabQueryParam = (defaultTab: ActiveTab) => {
export const ContactPointsPageContents = () => {
const { selectedAlertmanager } = useAlertmanager();
const useV2Nav = shouldUseAlertingNavigationV2();
const styles = useStyles2(getStyles);
// All hooks must be called unconditionally before any early returns
const [, canViewContactPoints] = useAlertmanagerAbility(AlertmanagerAction.ViewContactPoint);
@@ -262,7 +266,7 @@ export const ContactPointsPageContents = () => {
/>
)}
</TabsBar>
<TabContent>
<TabContent className={styles.tabContent}>
<Stack direction="column">
{showingContactPoints && <ContactPointsTab />}
{showNotificationTemplates && <NotificationTemplatesTab />}
@@ -299,6 +303,12 @@ const ContactPointsList = ({ contactPoints, search, pageSize = DEFAULT_PAGE_SIZE
);
};
const getStyles = (theme: GrafanaTheme2) => ({
tabContent: css({
marginTop: theme.spacing(2),
}),
});
function ContactPointsPage() {
const { navId, pageNav } = useNotificationConfigNav();
return (