search

primefaces / primereact

The Most Complete React UI Component Library
https://primereact.org
MIT License
6.66k stars 1.01k forks source link

Apollo theme: UI Issue with Frozen Columns and Selection Mode in Dark Mode #6660

Open Vseslavr opened 4 months ago

Vseslavr commented 4 months ago

Describe the bug

I'm using the latest Apollo theme and have encountered a UI bug. When using dark mode with frozen columns and selection mode enabled in the data table, the column values overlap with the frozen column values when a row is highlighted.

Screenshot 2024-05-15 103303

Reproducer

No response

PrimeReact version

10.2.1 and higher

React version

18.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

Chrome 125

Steps to reproduce the behavior

  1. Apply the Apollo theme.
  2. Enable dark mode.
  3. Configure the data table with frozen columns and selection mode enabled.
  4. Highlight a row.
  5. Observe the overlapping column values.

Expected behavior

Column values should not overlap with frozen column values when a row is highlighted.

ryan-ju commented 2 months ago

I believe this is an issue with the background's alpha value. In Chrome devtool, the selected <td>'s background color is rgba(129, 140, 248, 0.16), which is see through.

If you look at the theme.css file and search for tr.p-highlight, you'll see the alpha value is not 1.

I changed the alpha value to 1 and it's working fine for me now.

melloware commented 2 months ago

@ryan-ju can you sumbit a PR here: https://github.com/primefaces/primereact-sass-theme