[BUG]: Text selection styling is not working in portfolio

[Gautam25Raj]

Affected Apps / Packages

Portfolio (apps/portfolio)

Description

When selecting text on the portfolio website, the custom selection background color and text color do not show up. It defaults to the browser's default highlight color.

Metadata

• Suggested Branch: fix/portfolio-selection-style
• Suggested PR Title: [Fix] [Portfolio]: Resolve text selection styling in globals.css

Steps to Reproduce

1. Go to any public portfolio page.
2. Click and drag to select any text.
3. Observe that the text highlights in the browser default style instead of the custom blue/white accent colors.

Expected Behavior

The selected text background should be var(--color-accent) (blue) and the text color should be var(--color-accent-ink) (white).

Environment Information

• OS: All (Windows, macOS, Linux)
• Browser: Chrome, Safari, Firefox

Relevant Logs

No response

Proposed Fix / Suggestions

Modify apps/portfolio/app/globals.css to add !important to the selection colors and add the universal selector:

::selection {
  background: var(--color-accent) !important;
  color: var(--color-accent-ink) !important;
}

*::selection {
  background: var(--color-accent) !important;
  color: var(--color-accent-ink) !important;
}

[nik1062]

Hi! I'm interested in working on this issue. If it's available, I'd be happy to take it.

[Gautam25Raj]

Hi @nik1062! Thanks for offering to help. I have assigned this issue to you.

If you have questions or run into setup issues, reply here. Glad to have you help!