Feat/permission management feature unlock

[myself-alif]

url change and popup ui issue fix (Popup was not showing correctly)

Summary by CodeRabbit

• Style

  • Improved dropdown and permission settings containers to prevent clipping (switched to visible overflow), enhancing visibility of menus and popovers and smoothing scroll behavior.
  • Refined badge placement with absolute positioning for clearer alignment in the UI.

• Chores

  • Updated the Upgrade button destination to the pricing page with tracking parameters, guiding users directly to plan details.

[coderabbitai]

Walkthrough

UI-only updates: dropdown and container overflow switched to visible in MultiSelectBox and PermissionSettings; Badge in MultiSelectBox now uses absolute positioning with right offset; UpgradeButton’s default href updated to a pricing URL. No functional logic or public API changes reported.

Changes

Cohort / File(s)	Summary
Dropdown and badge positioning adjustments src/components/MultiSelectBox.js	Changed dropdown container from overflow-auto to overflow-visible; Badge now passed position='absolute' with right='60px'.
Permission settings overflow tweak src/components/ProPreviews/PermissionSettings.js	Main wrapper overflow updated from hidden to visible; no structural or API changes.
Upgrade link target update src/components/ProPreviews/common/UpgradeButton.js	Default href (when no children) updated to pricing URL with UTM params; other behavior unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Enhance design and unlock permission management features for free users #224 — Touches MultiSelectBox and Badge API updates similar to this PR’s overflow and positioning changes.
• Revert "Enhance design and unlock permission management features for free users" #242 — Overlaps with edits/removals involving MultiSelectBox and Badge adjustments referenced here.

Suggested labels

QA Approved

Suggested reviewers

• iftakharul-islam

Poem

I leapt through menus, light as air,
Let overflow be visible—no clipping snare.
A badge scoots right, all snug and spry,
Upgrade link hops to pricing high.
With twitching ears and CSS delight,
This bun ships UI, crisp and tight. 🐰✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title Check	⚠️ Warning	The title “Feat/permission management feature unlock” suggests a new permission feature implementation, but the changes are only UI overflow adjustments and a link update, not an actual feature unlock, so it does not clearly summarize the provided changes.	Rename the title to briefly describe the actual changes, for example “Fix dropdown overflow and update pricing link” to accurately reflect the UI adjustments and URL update.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
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
• Commit unit tests in branch feat/permission-management-feature-unlock

---

📜 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 0434ddd and 3d22523.

📒 Files selected for processing (3)

• src/components/MultiSelectBox.js (2 hunks)
• src/components/ProPreviews/PermissionSettings.js (1 hunks)
• src/components/ProPreviews/common/UpgradeButton.js (1 hunks)

🔇 Additional comments (4)

src/components/ProPreviews/PermissionSettings.js (1)

35-35: LGTM! Overflow change enables dropdown visibility.

The change from overflow-hidden to overflow-visible correctly allows the dropdown menu to extend beyond the container boundaries, fixing the popup UI issue mentioned in the PR description.

src/components/ProPreviews/common/UpgradeButton.js (1)

12-12: LGTM! URL updated with tracking parameters.

The href correctly points to the pricing page with appropriate UTM parameters for tracking user engagement from the WordPress dashboard.

src/components/MultiSelectBox.js (2)

42-42: LGTM! Overflow change consistent with PermissionSettings.

The change from overflow-auto to overflow-visible aligns with the overflow change in PermissionSettings.js and allows the dropdown menu to display properly without being clipped.

---

46-78: Badge positioning may not work correctly due to missing relative class on parent.

The Badge component at line 78 now uses position='absolute' and right='60px', which requires its parent container to have position: relative for correct positioning. However, the li element at line 46 has a broken conditional that never adds the relative class:

option[1] === 'Administrator relative'  // This will never be true

The condition checks for the string 'Administrator relative' (with a space), but option[1] will only contain role names like 'Administrator', 'Editor', etc.

Apply this diff to fix the conditional and add relative class to all list items:

-			className={ `${ option[1] === 'Administrator relative' ? 'bg-gray-200 hover:bg-gray-300' : 'hover:bg-[#F9FAFB]' } group cursor-pointer text-gray-900 flex items-center select-none py-2 px-4` }
+			className={ `${ option[1] === 'Administrator' ? 'bg-gray-200 hover:bg-gray-300' : 'hover:bg-[#F9FAFB]' } relative group cursor-pointer text-gray-900 flex items-center select-none py-2 px-4` }

Run the following script to verify Badge positioning behavior:

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

---

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.}