From 774551589bb68e28267759102187eef3b893c334 Mon Sep 17 00:00:00 2001
From: Alejandro Fraenkel <aifraenkel@gmail.com>
Date: Mon, 12 Jan 2026 15:32:06 +0100
Subject: [PATCH] Fix spacing in Notification Templates tab (legacy mode)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../components/contact-points/ContactPoints.tsx      | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx b/public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx
index c38fe825c96..1b1d6f8c46c 100644
--- a/public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx
+++ b/public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx
@@ -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 (