Skip to main content

Root responsive design

Root apps are built using modern web technologies like React and TypeScript. To ensure a great user experience, it’s essential that your app is fully responsive — both to the device screen size and to the Root desktop client's unique presentation modes.

While 1080p (1920x1080) is the most common resolution, your App should be tested against a wide range — from 720p (1280x720) to 4K (3840x2160). Use responsive design principles to smoothly adapt your layout.

Window size API​

Use the browser window API to determine current window size and to subscribe to a resize event.

const width = window.innerWidth;
const height = window.innerHeight;

window.addEventListener('resize', () => {
  console.log(window.innerWidth, window.innerHeight);
});

Root App presentation modes​

Root Apps have two presentation modes:

  • Docked: Your App is presented within the Root desktop client.
  • Undocked: Your App is presented in a standalone, resizable window.

The user is in full control of the mode: they decide whether to dock/undock your App, and they can resize either window at any time.

Use the browser window API to determine current window size and to subscribe to a resize event. There isn't a dedicated docked/undocked API because it's not needed; the normal browser API already does everything needed.

Docked mode​

Your App appears inside the Root desktop client, on the right side of the UI. The available space for your App depends on:

  • The user’s monitor size and resolution
  • The window size and position of the Root client
  • The Root App’s viewing state (e.g., sidebar expanded or collapsed)

You should assume a minimum viewport of approximately 800x600 pixels, corresponding to a 720p display with the Root client maximized.

Guidelines:

  • Your App must be fully functional at this minimum size
  • Gracefully degrade for smaller widths (e.g., hide sidebar, collapse sections, etc.)

Undocked​

Users can optionally “undock” your App into a standalone, resizable window. In this mode, users may scale the App up to full screen or resize it to a small floating window.

Guidelines:

  • Support down to 1280x720 resolution
  • Be responsive to any dynamic window resizing
  • Maintain UX consistency with the docked experience

Tips for building responsive Root apps​

  • Use flexbox and CSS grid for layout flexibility
  • Avoid hardcoded widths/heights — use relative units like rem, %, vh, and vw
  • Implement media queries to handle layout shifts at key breakpoints
  • Use container queries (where supported) for layout within dynamic parents
  • Test responsiveness using browser dev tools and window resize events
  • Hide or collapse non-critical UI on smaller viewports
  • Ensure accessibility remains intact across all screen sizes