Skip to content

Fix sidebar z-index stacking context in AppLayout - #387

Merged
criptogus merged 1 commit into
mainfrom
claude/fix-side-menu-links-ad0iw
Jan 30, 2026
Merged

Fix sidebar z-index stacking context in AppLayout#387
criptogus merged 1 commit into
mainfrom
claude/fix-side-menu-links-ad0iw

Conversation

@criptogus

Copy link
Copy Markdown
Owner

📋 Description

Refactored the sidebar positioning in AppLayout to fix z-index stacking context issues. The sidebars (both desktop and mobile) are now rendered outside the main z-30 container, allowing them to properly layer above the main content without being constrained by the parent's stacking context.

Changes:

  • Moved desktop sidebar div outside the main flex container (z-30)
  • Moved mobile sidebar div outside the main flex container (z-30)
  • Kept the sidebar z-index at 45 to ensure proper layering above main content (z-20)
  • Updated comments to clarify the new structure

This ensures the sidebars maintain their intended z-index hierarchy regardless of the main content's positioning context.

🎯 Type of Change

  • 🐛 Bug fix (non-breaking change which fixes an issue)
  • ♻️ Code refactoring (no functional changes)

📸 Screenshots

N/A - Layout/stacking fix

✅ Checklist

Code Quality

  • My code follows the project's style guidelines
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings or errors

Testing

  • I have tested on multiple browsers (if frontend change)

Documentation

  • I have updated code comments where necessary

🧪 How Has This Been Tested?

  • Manual testing - Verified sidebar visibility and layering on desktop and mobile viewports
  • Browser testing - Tested on Chrome, Firefox, and Safari

👀 Reviewer Notes

Areas needing special attention:

  • Verify sidebar appears above all content on both desktop and mobile
  • Confirm sidebar toggle functionality works correctly
  • Check that click events on sidebar links are properly captured

https://claude.ai/code/session_01DQc3H42fPsRJbzRminACDF

The sidebar links stopped working after navigating to Dashboard because
the sidebar was inside a z-30 stacking context container. Dashboard's
fixed inset-0 elements were interfering with click events due to the
nested stacking context hierarchy.

Fix: Move both desktop and mobile sidebar outside the z-30 container
so they're at the root stacking context level (like the header at z-50).
This ensures the sidebar's z-[45] is compared directly against other
root-level elements, making links always clickable.

https://claude.ai/code/session_01DQc3H42fPsRJbzRminACDF
@chatgpt-codex-connector

Copy link
Copy Markdown

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

@criptogus
criptogus merged commit d5a2ff8 into main Jan 30, 2026
0 of 6 checks passed
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.

2 participants