Skip to content

FIX: Explorer Toggle Button Hidden Behind Main Content#12

Merged
wicky-zipstack merged 1 commit intomainfrom
fix/explorer-toggle-button-z-index
Mar 30, 2026
Merged

FIX: Explorer Toggle Button Hidden Behind Main Content#12
wicky-zipstack merged 1 commit intomainfrom
fix/explorer-toggle-button-z-index

Conversation

@tahierhussain
Copy link
Copy Markdown
Contributor

What

  • Fix the explorer panel collapse/expand toggle button being hidden behind the main editor content area

Why

  • The toggle button was not visible or clickable because it was rendered behind the adjacent editor area due to CSS stacking context issues

How

  • Changed overflow: hidden to overflow: visible on .ideResizeExplorer to allow the absolutely positioned toggle button to render outside container bounds
  • Added position: relative and z-index: 10 to establish proper stacking context above the adjacent editor area

Can this PR break any existing features. If yes, please list possible items. If no, please explain why. (PS: Admins do not merge the PR without this section filled)

  • No breaking changes - This is a CSS-only fix that corrects the visual layering of the explorer toggle button. The overflow: visible change is safe because the explorer content is already constrained by its child elements, and the z-index: 10 only affects stacking relative to sibling elements.

Database Migrations

  • None

Env Config

  • None

Relevant Docs

  • N/A

Related Issues or PRs

  • N/A

Dependencies Versions

  • No changes

Notes on Testing

  1. Open the application with the explorer panel visible
  2. Verify the toggle button (circular arrow icon) is fully visible on the right edge of the explorer panel
  3. Verify clicking the button collapses/expands the explorer panel correctly
  4. Test in both light and dark themes

Screenshots

Sidebar expanded:
image

Sidebar collapsed:
image

Checklist

I have read and understood the Contribution Guidelines.

The collapse/expand toggle button on the explorer panel was being
rendered behind the main editor area due to missing stacking context
and overflow clipping.

Changes to .ideResizeExplorer:
- Changed overflow from hidden to visible to allow the button to render
  outside container bounds
- Added position: relative and z-index: 10 to establish proper stacking
  context above the adjacent editor area

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@tahierhussain tahierhussain self-assigned this Mar 30, 2026
@tahierhussain tahierhussain added the bug Something isn't working label Mar 30, 2026
Copy link
Copy Markdown
Contributor

@wicky-zipstack wicky-zipstack left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@wicky-zipstack wicky-zipstack merged commit e074dad into main Mar 30, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants