DX Icons: Update Scrolling After Team Testing (#8353)

[arman-boyakhchyan]

No description provided.

[Copilot]

Pull request overview

This PR updates scrolling behavior for the DX Icons application based on team testing feedback. The changes improve the scrollbar appearance and interaction by switching to custom scrolling with hover-based visibility.

Changes:

• Configured custom scrolling behavior (non-native, thumb scrolling, hover-based scrollbar)
• Adjusted card styling by moving height property and adding border transparency
• Added custom padding and scrollbar width rules to accommodate the custom scrollbar

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
applications/Icons/styles.css	Moved height property to card content selector, added border styling, and custom scrollbar width/padding rules
applications/Icons/script.js	Updated CardView scrolling configuration to use custom non-native scrolling with hover-based visibility

[Copilot]

The relative color syntax rgba(from var(...)) is a CSS Color Level 5 feature with limited browser support. Consider using a more widely supported approach like color-mix() or a separate CSS custom property with the alpha value applied, to ensure compatibility across all browsers that DevExtreme supports.

Suggested change

	border-color: rgba(from var(--dx-color-border) r g b / 0.5);
	border-color: color-mix(in srgb, var(--dx-color-border) 50%, transparent);

[Copilot]

The calculation calc(24px - 14px) evaluates to 10px and should be simplified to improve readability. If the calculation represents a relationship between two meaningful values, consider adding a comment to explain the reasoning.

Suggested change

	padding-right: calc(24px - 14px);
	padding-right: 10px;