fix(ui): enhance map styling for fullscreen mode to eliminate viewport gaps (#1435)

[GuthaSrishanthReddy]

Summary

Fixes map fullscreen layout so it cleanly fills the viewport without leaving a bottom gap.
The fix is scoped to fullscreen map state and preserves normal layout behavior outside fullscreen.

Type of change

• Bug fix
• New feature
• New data source / feed
• New map layer
• Refactor / code cleanup
• Documentation
• CI / Build / Infrastructure

Affected areas

• Map / Globe
• News panels / RSS feeds
• AI Insights / World Brief
• Market Radar / Crypto
• Desktop app (Tauri)
• API endpoints (/api/*)
• Config / Settings
• Other:

Checklist

• Tested on worldmonitor.app variant
• Tested on tech.worldmonitor.app variant (if applicable)
• New RSS feed domains added to api/rss-proxy.js allowlist (if adding feeds) — N/A
• No API keys or secrets committed
• TypeScript compiles without errors (npm run typecheck)

Screenshots

Before

After

Fixes #1435

[vercel]

@GuthaSrishanthReddy is attempting to deploy a commit to the Elie Team on Vercel.

A member of the Team first needs to authorize it.

[koala73]

Thanks for tackling this, @GuthaSrishanthReddy! The bottom gap in fullscreen is a real issue. A few things to address before we can merge:

BLOCKING: Duplicate/conflicting selectors
The PR adds display: none !important for .map-bottom-grid and .map-resize-handle, but lines 2488-2491 already hide these with visibility: hidden !important; pointer-events: none !important. Having both is redundant and confusing. Please consolidate to one approach.

HIGH: inset: 0 conflicts with existing top/left/width/height
The base .live-news-fullscreen rule already sets position: fixed; top: 0; left: 0; width: 100vw; height: 100vh. The new rule overrides with inset: 0 !important; width: auto !important; height: auto !important. These two rules fight each other. Better to modify the base rule directly rather than layering overrides.

MEDIUM: Fixed footer over fullscreen map
Pinning .site-footer with position: fixed; z-index: 10002 during fullscreen means it sits permanently on top of the map. The existing pattern hides UI elements during fullscreen for an immersive experience. A persistent footer contradicts that and may obscure map content at the bottom edge (arguably the same gap problem, inverted).

LOW: Trailing newline removed in event-handlers.ts
The only change to this file is removing the final newline. This is a noise diff; most linters expect a trailing newline (POSIX standard). Please revert.

NITPICK: Deleted useful comment
The comment /* Hide map overlays and sibling panels behind fullscreen panel (#829, #859) */ was removed. It references issue numbers and provides context for why those rules exist. Please keep it.

Suggestions:

1. Fix the base .live-news-fullscreen rule directly instead of adding conflicting overrides
2. Remove the duplicate hiding rules
3. Reconsider the fixed footer (hide it during fullscreen, or account for its height)
4. Restore the trailing newline in event-handlers.ts
5. Keep the issue-referencing comment

Thanks again for the contribution!

[GuthaSrishanthReddy]

Fixed in the commit ef876b3 (address review feedback)

1. Removed duplicate/conflicting fullscreen selectors.
2. Dropped inset override conflict and kept base fullscreen behavior coherent.
3. Removed fixed footer overlay in fullscreen.
4. Restored trailing newline in event-handlers.ts.
5. Restored the Map legend and filters on top layer #829/Full screen webcam is overlayed by new bottom panel #859 context comment.

[koala73]

Thanks for the quick turnaround on the feedback, @GuthaSrishanthReddy! Most of the first-round items are resolved.

A few things still remaining:

BLOCKING: Conflicting .map-container height rules
The existing rule at .live-news-fullscreen .map-container { height: calc(100vh - 80px) !important; } is still in place, while your new rule sets height: auto !important; flex: 1 1 auto !important; on the same element via a more specific selector. This works by specificity, but having two !important height declarations fighting each other is fragile. Please either update the original rule directly or add a comment explaining why both exist (the old one still applies to non-map fullscreen panels like the live news player).

LOW: min-height: 0 missing !important
In the new .map-container rule, min-height: 0 is the only property without !important, while every sibling property uses it. If any inherited style sets min-height with !important, this won't win.

Nice to have: Remove the unrelated blank line deletion (line 161)
The removed blank line after --accent is cosmetic noise. Keeping diffs scoped to the fix makes review easier.

Almost there!

[GuthaSrishanthReddy]

Thanks for the review @koala73

1. Removed 100vh-80px height styling for the .map-container.
2. changed the fullscreen map container's min-height to !important
3. Restored the removed blank line.

[koala73]

Almost ready to merge! One last tiny thing: line 162 in src/styles/main.css still has trailing whitespace on the blank line after --accent. Could you remove the trailing spaces on that line? Everything else looks good.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
worldmonitor	Ready	Preview, Comment	Mar 12, 2026 5:37pm