From dee9bc8fb9819aed8c704ade16f1209e682894d5 Mon Sep 17 00:00:00 2001
From: Alejandro Fraenkel <aifraenkel@gmail.com>
Date: Mon, 12 Jan 2026 15:29:05 +0100
Subject: [PATCH] Fix spacing issues in Contact Points and Templates tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../unified/components/contact-points/ContactPoints.tsx   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

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 123c4fbd1a5..c38fe825c96 100644
--- a/public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx
+++ b/public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx
@@ -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>
   );
 };