Element gets white gradient transparent during drag-bug behaviour

I’m working on an Angular 15 application that uses PrimeNG v15 and Angular CDK for drag-and-drop functionality. When I drag a row element, the drag preview shows a white gradient overlay, making the text unreadable and causing UI issues.
(i am super new to angular so i feel very alien and stuck on this.)

Here’s what I’ve tried so far:

• 
  Removing the element and adding a clone → Didn’t work as expected.
  
  
• 
  Adding custom CSS for .cdk-drag-preview → No visible effect.(i personally feel its because of primeng? but idk)
  
  
• 
  Adding logic in the component TypeScript → Still not sure if this helps.
  

This is a maintenance task for someone else’s code, so I cannot upgrade Angular or PrimeNG versions or use npm-based solutions.

Why does this white gradient appear during row drag, and how can I make the drag preview look exactly like the original row (without the gradient)?

Any guidance or best practices would be appreciated!

Continue reading...