Display geneUI on Row Hover Instead of geneSymbol Hover

[GarvitDadheech]

Solving issue #10762

Summary

This PR modifies the behavior of the geneUI component, ensuring it is displayed only when hovering over the entire row (.row) rather than just the geneSymbol element. This change enhances the user experience by making the geneUI visibility consistent across the entire row.

Changes Made

1. CSS Adjustments:

   • Moved the hover effect for displaying .addGeneUI from .geneSymbol:hover to .row:hover.
   • Removed the previous hover effect on .geneSymbol that controlled the visibility of .addGeneUI.

2. Updated Selectors:

   • Applied the %addGeneUIHover mixin to .addGeneUI within the .row:hover context.

Issue Resolution

The issue was resolved by ensuring the geneUI component becomes visible only when hovering over the .row element, rather than when hovering over the .geneSymbol element. This change required adjusting the CSS selectors and hover states to target the entire row.

Related Issue

Link to related issue

Testing and Verification

• Verified that the geneUI appears when hovering over any part of the row and not just the geneSymbol.
• Confirmed that the geneUI maintains proper styling and functionality when hovered and selected.

Please review the changes and let me know if any further adjustments are needed.

[netlify[bot]]

✅ Deploy Preview for cbioportalfrontend ready!

Name	Link
🔨 Latest commit	4da92c17efb30af0be1f48fe3466f633b919213d
🔍 Latest deploy log	https://app.netlify.com/sites/cbioportalfrontend/deploys/66a87a8709f297000872a959
😎 Deploy Preview	https://deploy-preview-4954--cbioportalfrontend.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.

[alisman]

This was addressed in https://github.com/cBioPortal/cbioportal-frontend/pull/5059 Thank for your your submission