[Feature](ui): Migrate Custom Component Styles to Tailwind CSS v4 Utilities

[vlad-schur-external-sap]

Description

Several ui-components currently use custom-defined styles that can likely be replaced with predefined Tailwind CSS utilities. Handling it in isolated, component-specific PRs can create inconsistent results and fragmented cleanup work across the package. Execute a dedicated, scoped refactor to normalize styles across all UI components in a single, focused PR.

Proposed Solution

Scope of that work:

1. Automated Upgrade: use npx @tailwindcss/upgrade to automatically convert legacy patterns and migrate the codebase to the latest Tailwind standards.
2. Use grep or editor search to locate any remaining custom styles or CSS modules that the upgrade tool missed.
3. Manually convert remaining exceptions to equivalent Tailwind utilities while keeping the exact visual behavior unchanged.

To prevent the reintroduction of custom styles, we will introduce the following tooling configurations in this PR:

1. Formatting: Add Prettier and ESLint formatting rules (for example, prettier-plugin-tailwindcss) with prettier-format to encourage consistent utility usage, reduce reintroduction of custom styling patterns, automate utility class sorting, and enforce consistent class ordering.
2. Add workspace recommendations in .vscode/extensions.json so contributors use the Tailwind CSS VS Code extension, along with workspace settings to enable autocomplete and linting on save

Alternatives Considered

1. Continue replacing custom styles incrementally in unrelated feature PRs. Prolongs codebase inconsistency, bloats unrelated PR reviews, and lacks a unified approach to utility selection.
2. Keep custom styles as-is and address only obvious problem spots.

These alternatives are less preferred because they may prolong inconsistency and increase long-term maintenance. This work is best handled in a single scope so migration decisions stay consistent across components and can be reviewed together.