CSS ENGINEERING • MAY 2026

Killing ResizeObserver with Container Queries.

A modern IDE is a chaotic grid of resizable panels: the file tree, the terminal, the Git integration, and the code minimap. When a user drags a split-pane boundary, traditional web apps use JavaScript ResizeObserver to measure the new panel width and manually inject CSS classes (like .is-narrow) to hide elements.

Running 50 active ResizeObserver listeners during a drag event causes catastrophic JavaScript main-thread blocking and Layout Thrashing. NitroIDE completely rips out JS-based resizing in favor of native CSS Container Queries.

Autonomous Micro-Frontends

Instead of relying on media queries (which measure the entire browser window), Container Queries allow a DOM element to measure its own parent container. This transforms every panel in NitroIDE into a self-aware, autonomous Micro-Frontend that handles its own responsive logic entirely within the C++ rendering engine.

/* 1. Define the IDE panel as a measurable container */
.terminal-panel {
  container-type: inline-size;
  container-name: terminal;
}

/* 2. The UI adapts based on the panel width, not the window width */
@container terminal (max-width: 400px) {
  .terminal-timestamp {
    display: none; /* Hide timestamps if panel is squeezed */
  }
  .terminal-input-prefix {
    content: ">"; /* Shorten the bash prefix */
  }
}

Container Query Units (cqw): Beyond breakpoints, NitroIDE uses responsive container units. By setting a font size to clamp(12px, 2cqw, 16px), the text inside a panel dynamically and smoothly scales based on the exact width of its parent container, with zero JavaScript required.

Silencing the Main Thread

By moving layout logic from JavaScript to CSS, we eliminate the "Scripting" phase of the browser's render pipeline during drag events. The browser only has to recalculate Style and Layout, allowing panel resizing to run at a flawless, hardware-accelerated 120fps.

Drag the Boundaries.

Resize the panels in our IDE and watch the layout adapt with zero JS overhead.

Open IDE