Explorer items hidden when using CSS transform on split-view-container

[DeepakRoy58]

Applying the following custom CSS causes files at the top of the Explorer to be hidden:

Problem arrises at :

.explorer-viewlet .split-view-container {
  transform: translateY(-22px) !important;
}

The items are still present but not visible. They only appear after clicking them, which triggers auto-scrolling.

=>Steps to Follow/Verify:

Apply the CSS above using a custom UI extension
Open a folder with multiple files
Check the Explorer panel

=>Actual behavior:
Top items are cut off or hidden. They become visible only after interaction.

=>Expected behavior:
All items should remain visible and scroll normally.

SOLUTION :

Proper fixes

->Remove it (best and cleanest)

.explorer-viewlet .split-view-container {
  /* remove this line completely */
  /* transform: translateY(-22px); */
}

-> If you still want spacing at the top (safe :))
Use padding instead of transform:

.explorer-viewlet .split-view-container {
  padding-top: 22px !important;
}

->Make sure scrolling isn’t blocked
If you’ve set this anywhere:

overflow: hidden;

change it to:

overflow: auto;