#1278 Fix for the flickering MenuItem on "my-posts?tab=drafts" page

[Ritek]

✨ Codu Pull Request 💻

Fixes #(issue)

Fixes #1278

Pull Request details

Fixed MenuItem background color flashing white on mouseLeave on "my-posts?tab=drafts" page.

Any Breaking changes

Just style fixes

Associated Screenshots

None

[Optional] What gif best describes this PR or how it makes you feel

None

[vercel]

@Ritek is attempting to deploy a commit to the Codú Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Removes the data-[focus]:bg-neutral-100 background focus utility from the Edit and Delete menu options in the post options dropdown, retaining only text color focus styling. This addresses a visual flicker issue that occurred when hovering over menu items.

Changes

Cohort / File(s)	Summary
Post options menu styling app/(app)/my-posts/_client.tsx	Removes background color focus state (data-[focus]:bg-neutral-100) from Edit link and Delete button in post options menu, keeping only text color focus styling

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A flicker was haunting the hover so bright,
A white ghost would dance, giving readers a fright!
But one small removal, a background dismissed,
Now focus glows smooth—no more flashing white mist.
thump thump ✨

Pre-merge checks and finishing touches

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The pull request title "#1278 Fix for the flickering MenuItem on "my-posts?tab=drafts" page" clearly identifies the issue being addressed and provides specific context about the location and nature of the fix. The title is directly related to the code changes, which remove styling utilities that were causing the white background flicker. The reference to issue #1278 and the specific page context makes the title clear and discoverable in project history.
Linked Issues Check	✅ Passed	The code changes in this pull request directly address the objectives from issue #1278 by removing the data-[focus]:bg-neutral-100 utility from menu items in the post options menu. This removal eliminates the white background that was flashing on mouse leave events, which was the core problem described in the issue. The fix is applied in the correct file (app/(app)/my-posts/_client.tsx) and targets the exact components mentioned in the reproduction steps.
Out of Scope Changes Check	✅ Passed	The pull request contains only focused changes that are directly related to resolving the flickering issue described in #1278. The modifications remove specific CSS utility classes from the Edit link and Delete button elements within the post options menu, with no changes to control flow, data mutations, or other unrelated functionality. All changes are scoped to the visual styling aspect of the MenuItem component.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 01581a6 and 584e747.

📒 Files selected for processing (1)

• app/(app)/my-posts/_client.tsx (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: e2e

🔇 Additional comments (1)

app/(app)/my-posts/_client.tsx (1)

209-209: Fix addresses the flicker issue but verify keyboard accessibility.

Removing the background focus styling successfully eliminates the white flash. However, relying solely on text color change (data-[focus]:text-neutral-500) as the focus indicator may not provide sufficient visual feedback for keyboard navigation users.

Please verify:

1. Navigate through the menu items using keyboard (Tab/Arrow keys) and confirm the focus state is clearly visible
2. Ensure the text color contrast change meets WCAG 2.1 focus indicator requirements

If the focus indicator is insufficient, consider these alternatives:

Option 1: Add a subtle border or outline instead of background:

-className="dropdown-item group flex items-center px-4 py-2 text-sm text-neutral-700 data-[focus]:text-neutral-500"
+className="dropdown-item group flex items-center px-4 py-2 text-sm text-neutral-700 data-[focus]:text-neutral-500 data-[focus]:outline data-[focus]:outline-1 data-[focus]:outline-neutral-300"

Option 2: Use CSS transition to smooth the background change:

-className="dropdown-item group flex items-center px-4 py-2 text-sm text-neutral-700 data-[focus]:text-neutral-500"
+className="dropdown-item group flex items-center px-4 py-2 text-sm text-neutral-700 data-[focus]:text-neutral-500 data-[focus]:bg-neutral-100 transition-colors duration-150"

Apply similar changes to line 223.

Also applies to: 223-223

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[NiallJoeMaher]

🌮