make AI settings page headers prominent

[CacheMeOwside]

What?

Closes #427

Increases the font size and weight of card titles on the AI settings page so they stand out clearly above the toggle labels.

Why?

On the AI settings page, the card titles and the individual toggle labels rendered at very similar sizes, leaving no clear visual step between a section title and its contents.

How?

Set the font-size to 0.9rem and font-weight to 600px for card titles in routes/ai-home/style.scss

Use of AI Tools

None

Testing Instructions

1. Go to /wp-admin/options-general.php?page=ai-wp-admin
2. Verify the card title (General Settings, Editor Experiments, Admin Experiments,) render bolder than the toggle labels below them.

Screenshots or screencast

When I run the plugin locally, the card header labels actually render at 15px / weight 499 (inherited from the @wordpress/dataviews package). So, what I see differs from the "Current" screenshot shared by @juanfra in the issue: #427.
The proposed 0.9rem / 600 values still shows a clear visual hierarchy, so I have gone ahead with that.

Before	After

Changelog Entry

Changed - Improved visual hierarchy on the AI settings page so card titles are more prominent than the toggle labels.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: CacheMeOwside <kaavyaiyer@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Co-authored-by: juanfra <juanfra@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.36%. Comparing base (4f5732e) to head (26bbcad).
⚠️ Report is 4 commits behind head on develop.

Additional details and impacted files

@@            Coverage Diff             @@
##             develop     #431   +/-   ##
==========================================
  Coverage      68.36%   68.36%           
  Complexity       813      813           
==========================================
  Files             53       53           
  Lines           3945     3945           
==========================================
  Hits            2697     2697           
  Misses          1248     1248           

Flag	Coverage Δ
unit	68.36% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[dkotter]

Changes look good to me, though noting the image shared on the original issue also seemed to adjust some spacing a bit which isn't done here. Can refine further in other PRs though.

Before	After

[dkotter]

I guess looking at this again more, I think we actually reduced the size of the titles here, which seems like maybe opposite of what we wanted? Curious for thoughts on this @juanfra @CacheMeOwside

[CacheMeOwside]

Hi @dkotter! Thanks for catching the spacing.

The @wordpress/dataviews package CSS is already setting the titles to 15px, so 0.9rem actually shrank them slightly. I believe the screenshot shared by @juanfra in the issue may not be rendering the dataviews CSS.

I'm happy to bump the font size to 1rem and add some spacing below the descriptions to match the screenshot. Here's what that would look like:

Before	After

Let me know if this looks better. I can push the changes (font size and spacing) as part of this PR, if that's okay.

[juanfra]

Thanks for this!

I can confirm the dataviews CSS in trunk is setting the 15px title. I'm testing with Gutenberg installed, and the 15px isn't there. So that's it. The thing is that probably this problem is going to land in core at some point. I believe it might be related specifically to this. So in the end we may want to fix it there.

For the screenshot shared in the original issue, I adjusted the margin-bottom of .dataforms-layouts-card__field-description to 36px to make the spacing feel more balanced.

[dkotter]

Let me know if this looks better. I can push the changes (font size and spacing) as part of this PR, if that's okay.

Big caveat that I'm not a designer but this looks good to me so I'd say push those changes up to this PR

[jeffpaul]

Tests well for me, will defer to @dkotter for final review/merge