fix(css): correct sidebar title selector to match actual DOM structure

- Change selector from 'fontSize' (camelCase) to 'font-size' (hyphenated)
- Update path to .theme-doc-sidebar-menu > div[style*="font-size"]
- This fixes the CSS not being applied to sidebar title elements

docs(agents): add mandatory visual changes workflow

- Add Playwright screenshot workflow for all CSS/styling changes
- Require before/after screenshots in PR comments (not committed)
- Update PR checklist to emphasize screenshot requirement

Author: luandro

AGENTS.md

@@ -78,16 +78,45 @@ Ask first:
 - translations: see `src/pages/index.tsx` usage of `@docusaurus/Translate`
 - components: small, typed React components like `src/components/HomepageFeatures/index.tsx`
 
+### Visual Changes Workflow (CSS/Styling)
+
+**MANDATORY for all styling changes:**
+
+1. **Start dev server**: `bun run dev` and wait for it to be ready
+2. **Capture BEFORE screenshot** using Playwright:
+   ```js
+   const { chromium } = require('playwright');
+   const browser = await chromium.launch({ channel: 'chrome' });
+   const page = await browser.newPage();
+   await page.goto('http://localhost:3000/path/to/page', { waitUntil: 'networkidle' });
+   await page.screenshot({ path: 'before.png' });
+   ```
+3. **Make CSS changes** and verify they work
+4. **Capture AFTER screenshot** with same approach
+5. **Upload screenshots to PR comment** using:
+   ```bash
+   gh pr comment <PR#> --body "## Visual Comparison
+
+   ### Before
+   [Describe old state]
+
+   ### After
+   [Describe new state]
+
+   [Upload before.png and after.png by dragging into comment box]"
+   ```
+6. **DO NOT commit screenshots to git** - they're only for PR review
+
 ### PR Checklist
 
 - commit style: Conventional Commits (e.g., `feat(scope): ...`)
 - lint, format, and tests: all green locally
 - diff: small and focused with a brief summary and i18n notes if applicable
-- include screenshots for visual changes
+- **CRITICAL: For visual changes, add before/after screenshots to PR comments (not committed to repo)**
 - reference the GitHub issue being solved in the PR description and link it explicitly
 - write a short human explanation of what changed and why (1–2 paragraphs max)
 - double-check the PR title matches the scope of the changes and uses lowercase Conventional Commit style
-- add “Testing” notes summarising which commands were run (or why a test could not be executed)
+- add "Testing" notes summarising which commands were run (or why a test could not be executed)
 - update documentation or task trackers (like `TASK.md`) when the PR changes workflows or processes
 
 ### When Stuck

src/css/custom.css

@@ -63,7 +63,7 @@ img.emoji {
 }
 
 /* Style the custom title elements rendered by DocSidebarItem wrapper */
-aside[class*="sidebar"] > div > div > div[style*="fontSize"] {
+.theme-doc-sidebar-menu > div[style*="font-size"] {
   background-color: var(--sidebar-title-bg) !important;
   color: var(--sidebar-title-text) !important;
   margin-left: 0 !important;
@@ -78,11 +78,7 @@ aside[class*="sidebar"] > div > div > div[style*="fontSize"] {
 }
 
 /* Dark mode border adjustment */
-[data-theme="dark"]
-  aside[class*="sidebar"]
-  > div
-  > div
-  > div[style*="fontSize"] {
+[data-theme="dark"] .theme-doc-sidebar-menu > div[style*="font-size"] {
   border-bottom-color: rgba(255, 255, 255, 0.1);
 }