Skip to content

SQL Console Mobile Gate

Goal

Keep the existing /sql console experience on desktop and tablet-sized viewports while avoiding a cramped, keyboard-hostile terminal experience on phones.

Behavior

  • At viewport widths below 48rem (normally 768 CSS pixels), show a mobile notice instead of initializing DuckDB-WASM and the xterm shell.
  • The notice explains that the SQL Console works best on a desktop-sized screen.
  • The primary action returns the user to the jobs page.
  • A secondary Continue anyway action replaces the notice with the existing SQL Console and initializes it normally.
  • Remember Continue anyway in sessionStorage, so navigation within the same browser tab does not show the notice repeatedly.
  • At viewport widths of 48rem and above, initialize the existing console without showing the notice.

The breakpoint uses CSS viewport pixels. It covers current non-Max iPhone Pro viewports, generally excludes iPads in portrait or landscape, and applies to a desktop browser only when its window is narrowed below approximately 768 CSS pixels.

Implementation

The /sql page will include both the mobile notice and the existing console workspace. CSS media queries will control the initial presentation without depending on user-agent detection.

The SQL Console script will check the viewport and session override before calling the existing boot path. Selecting Continue anyway will save the session override, reveal the workspace, and invoke that same boot path. DuckDB, xterm, and the parquet views will not load while the notice is active.

The existing SQL Console behavior, data sources, and desktop layout remain unchanged.

Accessibility

  • The notice uses normal document content and descriptive link or button text.
  • Keyboard users can reach both actions in logical order.
  • Focus moves to the revealed console when Continue anyway is selected.
  • The notice does not rely on color alone to communicate the recommendation.

Visual Design

The notice uses the same visual language as the existing apply-click email capture and cookie consent:

  • A centered, theme-aware surface using the Material background and foreground variables.
  • The apply-capture modal's 8px radius, subtle border, shadow, spacing, and left-aligned typography.
  • A primary Back to jobs action followed by an underlined, lower-emphasis Continue anyway action.
  • The existing dark SQL Console background remains behind the notice.

The implementation should reuse the existing apply-capture CSS classes where their semantics fit instead of copying equivalent styles into the SQL Console section.

Testing

Regression tests will verify:

  • The page includes the mobile notice and both actions.
  • The script defers console initialization below 48rem unless the session override is present.
  • Continue anyway persists the override and starts the existing console.
  • Desktop and tablet-sized viewports retain automatic console initialization.
  • The existing SQL Console asset and data-loading tests continue to pass.

Rendered validation will cover one phone-sized viewport and one desktop-sized viewport, including the Continue anyway interaction and relevant console errors.

Non-Goals

  • Rebuilding the terminal as a mobile-first SQL editor.
  • Blocking tablets by device type.
  • Redirecting mobile users automatically.
  • Persisting the override beyond the current browser session.