[GH-ISSUE #124] Explorer items hidden when using CSS transform on split-view-container #87

New issue

Open

opened 2026-05-06 13:13:11 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-06 13:13:11 +02:00

Owner

Originally created by @DeepakRoy58 on GitHub (Apr 25, 2026).
Original GitHub issue: https://github.com/bwya77/vscode-dark-islands/issues/124

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;

Originally created by @DeepakRoy58 on GitHub (Apr 25, 2026). Original GitHub issue: https://github.com/bwya77/vscode-dark-islands/issues/124 **Applying the following custom CSS causes files at the top of the Explorer to be hidden:** <img width="1920" height="1080" alt="Image" src="https://github.com/user-attachments/assets/e2a505d5-4d91-4356-8b3d-4b0e6b456123" /> 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;