Skip to content

Commit 6a9ad42

Browse files
committed
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
1 parent 9755c40 commit 6a9ad42

File tree

2 files changed

+33
-8
lines changed

2 files changed

+33
-8
lines changed

AGENTS.md

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,16 +78,45 @@ Ask first:
7878
- translations: see `src/pages/index.tsx` usage of `@docusaurus/Translate`
7979
- components: small, typed React components like `src/components/HomepageFeatures/index.tsx`
8080

81+
### Visual Changes Workflow (CSS/Styling)
82+
83+
**MANDATORY for all styling changes:**
84+
85+
1. **Start dev server**: `bun run dev` and wait for it to be ready
86+
2. **Capture BEFORE screenshot** using Playwright:
87+
```js
88+
const { chromium } = require('playwright');
89+
const browser = await chromium.launch({ channel: 'chrome' });
90+
const page = await browser.newPage();
91+
await page.goto('http://localhost:3000/path/to/page', { waitUntil: 'networkidle' });
92+
await page.screenshot({ path: 'before.png' });
93+
```
94+
3. **Make CSS changes** and verify they work
95+
4. **Capture AFTER screenshot** with same approach
96+
5. **Upload screenshots to PR comment** using:
97+
```bash
98+
gh pr comment <PR#> --body "## Visual Comparison
99+
100+
### Before
101+
[Describe old state]
102+
103+
### After
104+
[Describe new state]
105+
106+
[Upload before.png and after.png by dragging into comment box]"
107+
```
108+
6. **DO NOT commit screenshots to git** - they're only for PR review
109+
81110
### PR Checklist
82111

83112
- commit style: Conventional Commits (e.g., `feat(scope): ...`)
84113
- lint, format, and tests: all green locally
85114
- diff: small and focused with a brief summary and i18n notes if applicable
86-
- include screenshots for visual changes
115+
- **CRITICAL: For visual changes, add before/after screenshots to PR comments (not committed to repo)**
87116
- reference the GitHub issue being solved in the PR description and link it explicitly
88117
- write a short human explanation of what changed and why (1–2 paragraphs max)
89118
- double-check the PR title matches the scope of the changes and uses lowercase Conventional Commit style
90-
- add Testing notes summarising which commands were run (or why a test could not be executed)
119+
- add "Testing" notes summarising which commands were run (or why a test could not be executed)
91120
- update documentation or task trackers (like `TASK.md`) when the PR changes workflows or processes
92121

93122
### When Stuck

src/css/custom.css

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ img.emoji {
6363
}
6464

6565
/* Style the custom title elements rendered by DocSidebarItem wrapper */
66-
aside[class*="sidebar"] > div > div > div[style*="fontSize"] {
66+
.theme-doc-sidebar-menu > div[style*="font-size"] {
6767
background-color: var(--sidebar-title-bg) !important;
6868
color: var(--sidebar-title-text) !important;
6969
margin-left: 0 !important;
@@ -78,11 +78,7 @@ aside[class*="sidebar"] > div > div > div[style*="fontSize"] {
7878
}
7979

8080
/* Dark mode border adjustment */
81-
[data-theme="dark"]
82-
aside[class*="sidebar"]
83-
> div
84-
> div
85-
> div[style*="fontSize"] {
81+
[data-theme="dark"] .theme-doc-sidebar-menu > div[style*="font-size"] {
8682
border-bottom-color: rgba(255, 255, 255, 0.1);
8783
}
8884

0 commit comments

Comments
 (0)