Fix alignment and font issues in project operations settings page

app/assets/javascripts/grafana_integration/components/grafana_integration.vue

@@ -54,9 +54,9 @@ export default {
 <template>
   <section id="grafana" class="settings no-animate js-grafana-integration">
     <div class="settings-header">
-      <h3 class="js-section-header h4">
+      <h4 class="js-section-header">
         {{ s__('GrafanaIntegration|Grafana authentication') }}
-      </h3>
+      </h4>
       <gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
       <p class="js-section-sub-header">
         {{ s__('GrafanaIntegration|Embed Grafana charts in GitLab issues.') }}

app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue

@@ -26,7 +26,7 @@ export default {
     class="settings no-animate qa-incident-management-settings"
   >
     <div class="settings-header">
-      <h4 ref="sectionHeader" class="gl-my-3! gl-py-1">
+      <h4 ref="sectionHeader">
         {{ $options.i18n.headerText }}
       </h4>
       <gl-button ref="toggleBtn" class="js-settings-toggle">{{

app/assets/javascripts/operation_settings/components/metrics_settings.vue

@@ -31,9 +31,9 @@ export default {
 <template>
   <section class="settings no-animate">
     <div class="settings-header">
-      <h3 class="js-section-header h4">
+      <h4 class="js-section-header">
         {{ s__('MetricsSettings|Metrics dashboard') }}
-      </h3>
+      </h4>
       <gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
       <p class="js-section-sub-header">
         {{ s__('MetricsSettings|Manage Metrics Dashboard settings.') }}

app/views/projects/settings/operations/_alert_management.html.haml

@@ -5,7 +5,7 @@
 
 %section.settings.no-animate#js-alert-management-settings{ class: ('expanded' if expanded) }
   .settings-header
-    %h3{ :class => "h4" }
+    %h4
       = _('Alerts')
     %button.btn.js-settings-toggle{ type: 'button' }
       = _('Expand')

app/views/projects/settings/operations/_error_tracking.html.haml

@@ -4,7 +4,7 @@
 
 %section.settings.no-animate.js-error-tracking-settings
   .settings-header
-    %h3{ :class => "h4" }
+    %h4
       = _('Error tracking')
     %button.btn.js-settings-toggle{ type: 'button' }
       = _('Expand')

app/views/projects/settings/operations/_tracing.html.haml

@@ -3,7 +3,7 @@
 
 %section.settings.border-0.no-animate
   .settings-header{ :class => "border-top" }
-    %h3{ :class => "h4" }
+    %h4
       = _("Jaeger tracing")
     %button.btn.gl-button.js-settings-toggle{ type: 'button' }
       = _('Expand')

changelogs/unreleased/yo-fix-alertpage-alignment.yml

+---
+title: Fix alignment and font issues in project operations settings page
+merge_request: 51825
+author: Yogi (@yo)
+type: fixed

ee/app/assets/javascripts/status_page_settings/components/settings_form.vue

@@ -75,7 +75,7 @@ export default {
 <template>
   <section id="status-page" class="settings no-animate js-status-page-settings">
     <div class="settings-header">
-      <h4 ref="sectionHeader" class="gl-my-3! gl-py-1">
+      <h4 ref="sectionHeader">
         {{ $options.i18n.headerText }}
       </h4>
       <gl-button ref="toggleBtn" class="js-settings-toggle">{{

ee/spec/frontend/status_page_settings/__snapshots__/settings_form_spec.js.snap

@@ -8,9 +8,7 @@ exports[`Status Page settings form default state should match the default snapsh
   <div
     class="settings-header"
   >
-    <h4
-      class="gl-my-3! gl-py-1"
-    >
+    <h4>
       
       Status page
     

spec/features/alerts_settings/user_views_alerts_settings_spec.rb

@@ -25,7 +25,7 @@ RSpec.describe 'Alert integrations settings form', :js do
 
       it 'shows the alerts setting form title' do
         page.within('#js-alert-management-settings') do
-          expect(find('h3')).to have_content('Alerts')
+          expect(find('h4')).to have_content('Alerts')
         end
       end
 

spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap

@@ -8,13 +8,13 @@ exports[`grafana integration component default state to match the default snapsh
   <div
     class="settings-header"
   >
-    <h3
-      class="js-section-header h4"
+    <h4
+      class="js-section-header"
     >
       
       Grafana authentication
     
-    </h3>
+    </h4>
      
     <gl-button-stub
       buttontextclasses=""

spec/frontend/incidents_settings/components/__snapshots__/incidents_settings_tabs_spec.js.snap

@@ -9,9 +9,7 @@ exports[`IncidentsSettingTabs should render the component 1`] = `
   <div
     class="settings-header"
   >
-    <h4
-      class="gl-my-3! gl-py-1"
-    >
+    <h4>
       
       Incidents