Mobile responsiveness in Canvas dashboard

Introduction

Mobile view (in Canvas dashboard) automatically adjusts the dashboards for different screen sizes across desktop and mobile devices.

Mobile display modes

Our mobile view follows a single-column structure, stacking blocks vertically. It offers three configuration modes:

• Auto (Default) – The mobile layout mirrors the desktop version, arranging blocks left to right, top to bottom. Changes in the desktop layout automatically reflect on mobile.
• Manual – Customize the mobile layout independently. You can:
  • Rearrange blocks
  • Hide specific blocks
  • Modify block height using the height or aspect-ratio properties in the code editor.
• None – The desktop layout remains unchanged on all devices.

How to configure the mobile view

You can preview and control the mobile view by enabling Show mobile display in Dashboard edit mode:

• Development: Support both Visual and Code mode
• Reporting: Support Visual mode only

Syntax

Dashboard my_dashboard {
  ...


  view: CanvasLayout {
    block v1 {}
    block v2 {}
    block v3 {}
    
    mobile: {
      mode: "manual"
      block v1 {
        height: 100
      }
      block v3
      block v2 {
        aspect_ratio: "16 / 9"
      }
    }
  }
}