Fix z-index issue on Nominators page

[marc-aurele-besner]

User description

Fix z-index issue on Nominators page

---

PR Type

Bug fix

---

Description

• Fixed a z-index issue on the Nominators page by removing the z-index from the div wrapping the Listbox.Button and adjusting the z-index styling for Listbox.Options.
• Ensured that buttons from the Nominators page do not appear above the Sidekick wallet.
• Improved the consistency of class name ordering in the component.

---

Changes walkthrough 📝

	Relevant files
Bug fix	ActionsDropdown.tsx Fix z-index layering issue in ActionsDropdown component    explorer/src/components/Staking/ActionsDropdown.tsx Removed z-index from the div wrapping the Listbox.Button. Adjusted z-index styling for Listbox.Options to ensure proper layering. Minor reordering of class names for consistency. +4/-4

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[netlify]

✅ Deploy Preview for dev-astral ready!

Name	Link
🔨 Latest commit	b15ee34
🔍 Latest deploy log	https://app.netlify.com/sites/dev-astral/deploys/66cf058ba1c53300083cc37a
😎 Deploy Preview	https://deploy-preview-831--dev-astral.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ No key issues to review

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible issue	Ensure the stacking context is correctly maintained by restoring the z-index The removal of z-30 from the div element might cause stacking context issues if not handled elsewhere. Ensure that the removal of z-index does not affect the visibility or stacking order of the dropdown in relation to other components. explorer/src/components/Staking/ActionsDropdown.tsx [57] -<div className='relative'> +<div className='relative z-30'> Suggestion importance[1-10]: 8 Why: The removal of z-30 could potentially cause stacking issues, so restoring it ensures the dropdown's visibility and correct stacking order, addressing a possible UI issue.	8
	Verify the new z-index value for potential overlap issues The Listbox.Options component has a z-50 class added, which might conflict with other elements' stacking context. Verify that this change does not cause any overlap or visibility issues with other overlapping components. explorer/src/components/Staking/ActionsDropdown.tsx [75] +<Listbox.Options className='absolute sticky z-50 mt-1 max-h-60 w-auto overflow-auto rounded-xl bg-white py-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-blueAccent dark:text-white sm:text-sm md:w-full'> - Suggestion importance[1-10]: 7 Why: Adding z-50 could affect the stacking context, and verifying this change is important to prevent potential UI overlap issues, though it may not be a critical problem.	7
Maintainability	Standardize the order and naming of CSS classes for better consistency The className for ChevronDownIcon has inconsistent ordering and naming of classes compared to the previous version. Consider maintaining a consistent order and naming convention for CSS classes to improve readability and maintainability. explorer/src/components/Staking/ActionsDropdown.tsx [63] <ChevronDownIcon - className='dark:text-primaryAccent size-5 text-white ui-open:rotate-180' + className='size-5 text-white ui-open:rotate-180 dark:text-primaryAccent' aria-hidden='true' /> Suggestion importance[1-10]: 7 Why: The suggestion improves code readability and maintainability by standardizing the order of CSS classes, which is a good practice but not crucial for functionality.	7
	Simplify the class names in Listbox.Button for better readability and maintainability The Listbox.Button class names are quite lengthy and complex, which could be simplified for better readability and maintainability. Consider using CSS methodologies like BEM or utility classes to simplify the class names. explorer/src/components/Staking/ActionsDropdown.tsx [58] -<Listbox.Button className='bg-primaryAccent from-primaryAccent relative w-full cursor-default rounded-full to-purpleUndertone py-[10px] pl-3 pr-16 text-left font-["Montserrat"] text-white shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 dark:bg-gradient-to-r dark:text-white sm:text-sm md:pr-10'> +<Listbox.Button className='dropdown-button'> Suggestion importance[1-10]: 5 Why: While simplifying class names can improve readability, the suggestion does not provide a specific solution or methodology, making it less actionable.	5