Draw a divider above analytics dashboard section headings

What does this MR do and why?

This MR now has four original commits plus three review follow-up commits. The first replaces gl-justify-end with gl-mt-auto on the section header, fixing overflow clipping on narrow viewports without changing the desktop layout. The second adds gl-gap-5 md:gl-gap-3 to the filter bar root, restoring the spacing between the two filter groups on narrow screens. The third simplifies the section header specs, dropping the class-string assertions and keeping the structural one, that the title renders inside the divider.

First, the section header root gets gl-h-full. It used gl-justify-end to bottom-align, but had no height, so inside the grid cell's absolutely positioned content wrapper it was only as tall as its text, measured at 40px in an 84px cell, and the spare rows fell below the heading instead of above.

Second, the divider. The DAP Impact design shows a full-width rule directly above each section heading, including the first one under the filter bar. The component rendered none. The rule is now always drawn: product decided to keep it out of the dashboard config for now and render it for every section. It sits on an inner wrapper, not the component root, so it hugs the heading text with 12px of padding below it, and the spare grid rows above the heading stay above the rule. Putting it on the root would draw the line at the top of the grid cell, far from the text.

Third, the DAP Impact section rows shrink from eight to seven. Each section is bottom-aligned, so the rows it does not need become the gap above the rule. Measured in the Adoption view: an 80px cell with a 64px content box holding a 53px rule-plus-heading block, leaving 11px of slack. Together with the 8px gridstack inset on either side, the rule sat 27px below the panel above it and 43px below the filter bar. Seven rows is the fewest that fit the block (54px for 53px), so every panel below a section shifts up by the rows freed, and the gap above a rule between panels is now 17px.

Fourth, the filter bar loses its form-group margins. GlFormGroup carries a 16px bottom margin meant for stacked form fields, and the reset button had gl-mb-5 purely to stay aligned with the groups. On top of the layout's own 8px bottom padding and the 8px gridstack inset, the first grid row started 32px below the filter controls. Both form groups now get gl-mb-0 and the reset button drops its margin, so the first row starts 16px below the controls, matching the gap between panels, and a section rule under the filter bar sits 17px below them, the same as one between panels. This applies to every dashboard on the explore analytics dashboards page.

The companion merge request !254440 (merged) (merged) added the first sections to a built-in dashboard, DAP Impact, and reserved the eight rows the third commit trims.

There is no changelog entry. Only the DAP Impact dashboard declares sections, and the explore analytics dashboards page sits behind the default-off explore_analytics_dashboards feature flag.

References

• !252246 (merged): added the SectionHeader panel type
• https://gitlab.com/gitlab-org/gitlab/-/work_items/605725: section header work item
• !254440 (merged): DAP Impact Adoption sections (merged)

Screenshots or screen recordings

Rule above section headings (first two commits):

Before	After

Gap above the rule (last two commits):

	Before	After
Under the filter bar (43px to 17px)
Between panels (27px to 17px)

How to set up and validate locally

1. Run yarn storybook:start and open the SectionHeader stories under analytics/analytics_dashboards/components/section_header. Confirm a rule renders above the title, with the title below it.
2. Enable explore_analytics_dashboards and dap_impact_v1, then restart rails-web.
3. Open /explore/analytics_dashboards/dap_impact?view=1 and pick a group. Confirm each heading sits at the bottom of its row with the rule directly above it, and that the gap above the rule is the same under the filter bar as it is between panels (17px in both places).
4. Open /explore/analytics_dashboards/duo_and_sdlc_trends and confirm the first panel row now sits 16px below the filter controls, with the reset button still bottom-aligned to them.
5. Run yarn jest spec/frontend/analytics/analytics_dashboards/components/section_header_spec.js spec/frontend/explore/analytics_dashboards/components/dashboard_filters_spec.js spec/frontend/explore/analytics_dashboards/pages/details_spec.js.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.