Skip to content

Fix editor sticky scroll shadow missing#309253

Open
yogeshwaran-c wants to merge 1 commit intomicrosoft:mainfrom
yogeshwaran-c:fix/sticky-scroll-shadow-missing-300355
Open

Fix editor sticky scroll shadow missing#309253
yogeshwaran-c wants to merge 1 commit intomicrosoft:mainfrom
yogeshwaran-c:fix/sticky-scroll-shadow-missing-300355

Conversation

@yogeshwaran-c
Copy link
Copy Markdown
Contributor

Summary

Fixes #300355

The editor sticky scroll's bottom shadow was not rendering because the outward box-shadow on the widget root was clipped by its own overflow: hidden.

This restructures the sticky scroll widget DOM to match the proven pattern used by the tree view's sticky scroll:

  • sticky-widget-content (new inner wrapper): carries overflow: hidden and the bottom border, containing the line numbers and line content
  • sticky-widget-shadow (new element): positioned just below the content area with an inset box-shadow that renders reliably regardless of parent overflow
  • sticky-widget (root): no longer has overflow: hidden, allowing the shadow element to extend beyond the content bounds

Test plan

  • Open a file with enough nested scopes to trigger sticky scroll (e.g., nested functions/classes)
  • Scroll down so sticky scroll headers appear at the top of the editor
  • Verify a visible shadow appears at the bottom edge of the sticky scroll, separating it from the editor content below
  • Test with Dark Modern, Light Modern, and High Contrast themes
  • Verify the sticky scroll in the Explorer tree view still has its shadow (unchanged)
  • Verify sticky scroll line content is still clipped horizontally (no overflow)
  • Verify folding icons, hover effects, and click-to-navigate still work on sticky scroll lines
  • Verify sticky scroll in peek view editors still renders correctly

The editor sticky scroll's bottom shadow was not rendering reliably.
The previous approach used a box-shadow directly on the widget's root
element which also had overflow:hidden, causing the outward shadow to
be clipped.

This adopts the same proven pattern used by the tree view's sticky
scroll: a dedicated shadow element positioned just below the content
area, using an inset box-shadow that is never clipped by the parent's
overflow. The widget's DOM is restructured with a content wrapper
(sticky-widget-content) that carries the overflow:hidden and border,
while the outer root (sticky-widget) allows the shadow element to
extend beyond the content bounds.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Editor sticky scroll shadow missing

2 participants