Skip to main content
World Monitor’s layout system adapts to your screen size and workflow, with resizable panels, drag-and-drop reordering, and automatic ultra-wide mode for large monitors.

​
Panel Grid System

The dashboard uses a CSS Grid layout with panels arranged vertically (by default) or in an L-shape (on ultra-wide screens).

​
Default Layout (< 2000px wide)

1

Map at top (full-width)

The 3D globe occupies the full width of the screen, typically 60–70% of viewport height.
2

Panels stack vertically below

News feeds, intelligence modules, video streams, and other panels stack in a single column.
3

Scroll to see all panels

The layout is vertically scrollable — you scroll down through panels as you monitor different data sources.

​
Ultra-Wide Layout (≥ 2000px wide)

On screens 2000px or wider (ultra-wide monitors, 4K displays), the layout automatically switches to an L-shaped arrangement:
1

Map floats left at 60% width

The globe is pinned to the left side of the screen, occupying ~60% of the horizontal space.
2

Panels tile to the right

Panels flow into the remaining 40% of horizontal space to the right of the map.
3

Panels wrap below the map

Once panels overflow past the map’s height, they spread to full width below the map.
Technical implementation:
  • Uses display: contents to dissolve the .panels-grid container
  • Individual panel elements become direct flow children of .main-content
  • float: left on the map creates natural L-shaped wrapping
  • No JavaScript layout engine — pure CSS flow
Ultra-wide mode maximizes screen real estate on 34” ultrawide and 4K monitors. All panels remain visible without excessive scrolling.

​
Panel Resizing

Every panel has a drag handle on its bottom edge that lets you adjust its height:
1

Hover over the bottom edge of any panel

A horizontal resize handle appears (cursor changes to ns-resize).
2

Click and drag up or down

The panel height adjusts in real-time.
3

Release to lock the new height

The height is saved to localStorage and persists across sessions.
4

Double-click to reset

Double-clicking the drag handle resets the panel to its default height.

​
Height Spans

Panels snap to grid row heights (span-1 through span-4):
SpanHeightUse Case
span-1~200pxCompact widgets (market tickers, signal counts)
span-2~400pxStandard panels (news feeds, video streams)
span-3~600pxLarge panels (command palette, multi-feed news)
span-4~800pxExtra-large (map brief, full country timeline)
The grid system ensures panels align cleanly and don’t create awkward gaps. Resizing snaps to the nearest span.

​
Drag-and-Drop Reordering

You can reorder panels by dragging them within the grid:
1

Click and hold the panel header

The panel becomes draggable (cursor changes to move).
2

Drag the panel up or down

Other panels shift to make room as you drag.
3

Release to drop in the new position

The custom order is saved to localStorage and persists across sessions.
4

Reset to default order

Click Reset Layout in the settings menu (gear icon → Layout).
Touch support: Panel reordering works on tablets via touch events (long-press to grab).
Panel order is per-variant. If you customize the layout in World Monitor (geopolitical), switching to Tech Monitor will load Tech’s default layout. Customize each variant separately.

​
Map Pin Mode

The Map Pin button (📌) locks the map in a fixed position so it remains visible while scrolling through panels.

​
How It Works

  • Map scrolls out of view as you scroll down
  • Panels occupy full viewport height
  • Standard vertical flow

​
Activating Pin Mode

1

Click the 📌 button

Located in the map controls (top-right corner of the globe).
2

Map becomes pinned

The map stays at the top of the screen as you scroll.
3

Pin state persists

Your preference is saved to localStorage and restored on reload.
4

Click again to unpin

Map returns to normal scroll behavior.
Use case: Pin mode is useful when you need to simultaneously monitor the map and scroll through news panels — the map remains visible as a reference while you read headlines below.
Pin mode combines well with ultra-wide layout — the map stays fixed on the left while panels scroll on the right.

​
Responsive Breakpoints

World Monitor adapts to different screen sizes:
Screen WidthLayout Behavior
< 768pxMobile warning (dashboard designed for desktop)
768px – 1999pxDefault vertical stacking
≥ 2000pxUltra-wide L-shaped layout
≥ 3440pxExtra spacing for 5K/8K displays

​
Mobile Detection

Screens below 768px wide receive a warning modal on load:
⚠️ World Monitor is optimized for desktop use For the best experience, view on a screen at least 768px wide. Many panels and map controls are not accessible on small screens.
You can dismiss the warning and continue, but functionality will be limited.
World Monitor is not a mobile app. It’s designed for multi-panel desktop monitoring. For mobile-friendly monitoring, consider the Happy Monitor variant, which has a simpler layout.

​
Panel Visibility Toggles

Some panels have collapse/expand buttons (▼/▲) in their headers:
  • Collapsed: Panel header remains visible, content is hidden (saves vertical space)
  • Expanded: Full panel content is visible
Collapse state is saved per-panel in localStorage. Use case: Hide panels you’re not actively monitoring to reduce clutter and scrolling distance.

​
Layout Persistence

All layout customizations are stored in localStorage:

✅ Persists Across

  • Page reloads
  • Browser restarts
  • Variant switches (within same device)

❌ Does NOT Persist

  • Across devices (no cloud sync)
  • After clearing browser cache
  • In private/incognito mode
localStorage keys:
  • worldmonitor-panel-order — Custom panel order
  • worldmonitor-panel-heights — Per-panel height overrides
  • worldmonitor-map-pinned — Map pin state
  • worldmonitor-panel-collapsed — Collapsed panel IDs
Clearing browser cache will reset your layout to defaults. Export your layout settings before clearing cache (feature planned for future release).

​
Troubleshooting

Ensure your screen width is ≥ 2000px:
  1. Check browser window width (not just monitor resolution)
  2. Zoom level affects layout — 100% zoom is required
  3. Some browsers report incorrect viewport width in dev tools
Test: Press F11 for fullscreen on a 4K/ultrawide monitor.
This means localStorage is being cleared:
  • Check if you’re in private browsing mode
  • Disable cache-clearing browser extensions
  • Some corporate networks block localStorage
Workaround: Use the desktop app (Tauri) which stores layout in OS-level storage.
The pin button only appears on screens ≥ 768px wide. On mobile, the map is always unpinned (standard scroll behavior).
Check if:
  • Your browser supports CSS resize: vertical (IE11 doesn’t)
  • You’re hovering over the exact bottom edge (3px hit area)
  • The panel is locked (some panels disable resizing)
Workaround: Use the settings menu to manually adjust panel heights.
This indicates a CSS Grid conflict:
  • Try force-reloading (Cmd+Shift+R / Ctrl+Shift+R)
  • Check browser zoom is 100%
  • Disable browser extensions that inject CSS
Workaround: Disable ultra-wide mode via settings (forces vertical stacking).

Build docs developers (and LLMs) love

Get started for freeTalk to us