A layout that fits the screen

Task: a side menu next to the content on a wide screen, above it on a phone.

# Recipe: side by side on a wide screen, stacked on a narrow one.
paths:
  components: ./components

stack-below="md" puts the boxes of a ui:hbox one above the other below the md width (768 px in the browser, 96 columns in a terminal). width fixes the side box, grow="true" gives the content the rest, and hide-below="lg" keeps a hint for wide screens only.

<q:component name="Inbox">
  <ui:window title="Inbox">
    <!-- Side by side from md up; below md (768 px) the boxes stack. -->
    <ui:hbox gap="lg" padding="lg" stack-below="md" id="main">
      <ui:vbox width="220" gap="sm" id="side">
        <ui:link to="/">Inbox (3)</ui:link>
        <ui:link to="/sent">Sent</ui:link>
        <!-- Only on wide screens: hidden below lg. -->
        <ui:text hide-below="lg">Tip: press / to search.</ui:text>
      </ui:vbox>

      <!-- grow takes the width the side box leaves. -->
      <ui:vbox gap="sm" grow="true">
        <ui:panel title="Welcome">
          <ui:text>The main content takes the rest of the width.</ui:text>
        </ui:panel>
        <ui:hbox gap="sm" justify="end">
          <ui:button>Archive</ui:button>
          <ui:button variant="primary">Reply</ui:button>
        </ui:hbox>
      </ui:vbox>
    </ui:hbox>
  </ui:window>
</q:component>

quantum test reads the page's text, not its layout, so it checks the content:

<q:test name="both columns are on the page, side first" page="/">
  <test:visit />
  <test:expect text="Inbox (3) Sent" />
  <test:expect text="Welcome The main content takes the rest of the width." />
  <test:expect text="Archive Reply" />
</q:test>

tests/layout.test.q
  PASS  both columns are on the page, side first
1 passed, 0 failed

The stacking itself is checked in the console, where a test can measure it: at 80 columns #main is stacked, at 140 it is side by side and #side is 220 / 8 = 27 columns wide (tests/docs/test_cookbook_console.py). The rule: UI-2.