🐛 Settings page: inner navigation sidebar hidden behind content on ~13" screens

[vianmora]

Describe the bug

On ~13" screens (~1280px wide), the left sub-navigation sidebar on the Event Settings and Organizer Settings pages is rendered behind the settings form panels, making it inaccessible or hard to interact with.

To Reproduce

1. Open Hi.Events on a ~1280px wide screen (or zoom browser to ~110% on a 1440px screen)
2. Navigate to Manage Event → Event Settings (or Organizer Settings)
3. Observe the left sub-navigation panel (Event Details, Location, Checkout, SEO, etc.)
4. The sidebar is visually covered by the settings form sections

Expected behavior

The left sub-navigation sidebar remains fully visible and clickable above the settings panels at all times.

Screenshots

Reproducible by resizing browser to ~1280px wide.

Logs
No console errors: this is a pure CSS layout/stacking issue.

Desktop:

• OS: any
• Browser: any (layout issue, not browser-specific)
• Screen size: ~1280px wide (typical 13" laptop)

Hi.Events Version and platform
Current develop branch. Reproducible on local/Docker.

Additional context

Two root causes identified in the code:

1. Breakpoint uses viewport width instead of available container width

// frontend/src/components/routes/event/Settings/index.tsx:90
// frontend/src/components/routes/organizer/Settings/index.tsx:82
const isLargeScreen = useMediaQuery('(min-width: 1200px)', true);

The 2-column layout (240px inner sidebar + flex content) activates when viewport ≥ 1200px. But the actual available width inside .main is viewport − 280px (app sidebar) − 64px (padding) ≈ 936px on a 1280px screen. The breakpoint should be based on the container width, not the viewport width

A CSS Container Query would be the correct fix.

2. Sticky inner sidebar has no z-index

// event/Settings/index.tsx:129 / organizer/Settings/index.tsx:119
<Box w={240} style={{position: 'sticky', top: 20}}>

Mantine form components (Select, DatePicker, etc.) and Card elements create stacking contexts that render on top of the sticky sidebar, which has no z-index set.

Affected files:

• frontend/src/components/routes/event/Settings/index.tsx (line 90, 129)
• frontend/src/components/routes/organizer/Settings/index.tsx (line 82, 119)

[daveearley]

Thanks for the report, @vianmora!

I'm unable to reproduce this in Chrome, Firefox or Safari. What browser are you using?

Do you have any extensions enabled that would cause this?

Kapture.2026-04-04.at.07.44.45.mp4

[vianmora]

I'm using arc :/

[daveearley]

Arc uses Chromium, so it should render the same as Chrome. I assume this is something specific to your browser.

Appreciate the report, but I'll close this for now. If other people report it, we can reopen.

[vianmora]

Yes, arc use chromium, but with a specific bar on the left that render something different :/
I aloso checked my extensions, and it seems I have no problemetic extension, i've tried uninstall the 2 i had (bitwarden and ublock) :/

[vianmora]

Just to follow up — while the viewport-based approach (useMediaQuery('min-width: 1200px')) is already in the codebase, the bug is actually caused by the fact that it measures the full viewport width, not the available content width. On a ~13" screen with the app sidebar open (~280px), the viewport can be ≥ 1200px while the actual content area is only ~920px — so the two-column layout is forced even though there isn't enough room. This is particularly visible in browsers with their own persistent sidebar, like Arc, which reduces the available content width without affecting the viewport.

I've fixed it in my fork by replacing the conditional JSX with CSS container queries (min-width: 1000px on the container), which respond to the real available width regardless of the viewport or browser chrome.

If anyone else runs into this, the fix is available in the Docker image at vianmora/hi.events-all-in-one:latest. The fork is kept in sync with upstream every week, so it should stay up to date.