fix(stepper): prevent item focus indicator clipping

[Copilot]

The Stepper component's active/current step indicators were being clipped at the top when browser zoom was set to 125% or 175%. This issue affected Default, Material, and Fluent themes, causing the focus ring around current steps to appear cut off.

Root Cause

The focus indicator uses a ::after pseudo-element that extends 4px beyond the step indicator bounds using negative margins (inset-block-start: -4px). At high zoom levels, these negative margins caused the focus indicator to be clipped by parent containers that didn't have proper overflow handling.

Solution

After identifying that the .k-step-link element had overflow: hidden, the fix was simplified to only change .k-step-link overflow from hidden to visible in the core layout. This single, targeted change ensures focus indicators are not clipped when extending beyond normal bounds. This minimal change:

• Only affects overflow behavior without altering visual design
• Applies to all themes since it's implemented in the core layout
• Maintains backward compatibility with existing functionality
• Uses the most minimal approach by only modifying the specific element causing the clipping

Visual Comparison

Before (clipped at 175% zoom):

After (complete indicators at 175% zoom):

The fix ensures that focus indicators are fully visible at all zoom levels while maintaining the existing visual design and functionality.

Fixes #5599.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[github-actions]

Packages Report

	core	default	classic	bootstrap	material	fluent	utils	html
Size	29.40 KB (0.0%)	763.75 KB (0.0%)	763.77 KB (0.0%)	777.00 KB (0.0%)	911.89 KB (0.0%)	1176.89 KB (0.0%)	625.19 KB (0.0%)	73.18 MB (0.0%)
Gzip Size	4.85 KB (0.0%)	98.81 KB (0.0%)	99.14 KB (0.0%)	100.69 KB (0.0%)	111.75 KB (0.0%🔼)	136.18 KB (0.0%)	52.16 KB (0.0%)	14.58 MB (0.0%)
Compile Time	3 s (0.0%)	8 s (100.0%🔼)	4 s (0.0%)	4 s (0.0%)	4 s (0.0%)	5 s (0.0%)	4 s (0.0%)	8 s (0.0%)

[Copilot]

Pull Request Overview

This PR fixes a visual clipping issue in the Stepper component where focus indicators were being cut off at high browser zoom levels (125% and 175%). The fix ensures that focus rings around current steps remain fully visible across all themes.

Key changes:

• Added overflow: visible to stepper container elements to prevent focus indicator clipping
• Applied changes at the core level to benefit all themes consistently
• Minimal CSS-only solution that maintains backward compatibility

[zhpenkov]

@copilot this does not seem to work, try modifying the overflow style of the k-step-link element.

[Copilot]

@copilot this does not seem to work, try modifying the overflow style of the k-step-link element.

You were absolutely right! The issue was that .k-step-link had overflow: hidden which was clipping the focus indicator even though I had added overflow: visible to the parent containers. I've changed .k-step-link overflow from hidden to visible and the fix now works perfectly at all zoom levels.

Commit: 85253c2

[Copilot]

Pull Request Overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.