> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qtap.qa/llms.txt
> Use this file to discover all available pages before exploring further.

# Using the dashboard on a phone

> How the dashboard rearranges itself on a small screen, and which pages still want a wider one.

Your team will often open the dashboard on the phone in their pocket rather than walk to the till computer. Most of it works there. Two pages were rebuilt for small screens, one still needs a sideways swipe, and one screen needs a display about the width of a laptop.

## Opening the menu

Below roughly 768 pixels the left sidebar is replaced by a menu button in the top-left corner. Tap it and the navigation slides in from the left with the same items you see on a desktop, filtered to what your role can open.

Tap a page and the menu closes itself, so there is no separate close step to remember.

<Frame caption="The navigation slides in from the left when you tap the menu button.">
  <img src="https://mintcdn.com/qtap/7M0_b7x2lukVABrg/images/merchants/getting-started/on-a-phone-nav.png?fit=max&auto=format&n=7M0_b7x2lukVABrg&q=85&s=46a040641d161de3b54f152be57aab1f" alt="The Qtap navigation menu open on a phone" width="390" height="844" data-path="images/merchants/getting-started/on-a-phone-nav.png" />
</Frame>

## The Members list on a phone

On a wide screen the members table has a column each for contact details, stamps, points balance, join date, last activity and push status. None of that fits across a phone, so those columns fold into a labelled list under the customer's name rather than disappearing.

Below 640 pixels the email, phone, stamps, points and push lines all sit in that list. Between 640 and 1024 they go back to being columns, and only **Joined** and **Last active** stay in the list. From 1024 up you get the full table.

No figure is lost at any width. Anything that has a column on a desktop is printed under the name on a phone.

<Frame caption="Contact details, balances and push status fold into a labelled list under each customer's name.">
  <img src="https://mintcdn.com/qtap/7M0_b7x2lukVABrg/images/merchants/getting-started/on-a-phone-members.png?fit=max&auto=format&n=7M0_b7x2lukVABrg&q=85&s=37572a5b3e6e15e4c5588d6352ecbe65" alt="The Members list on a phone, with the folded detail list under a customer's name" width="390" height="418" data-path="images/merchants/getting-started/on-a-phone-members.png" />
</Frame>

The search box, the sort control and the row menu grow to 44 pixels tall below 640 pixels so a thumb can hit them, and shrink back to their desktop size above that.

## The QR Codes page on a phone

QR Codes folds the same way, in three stages. The code and type drop into the list below 640 pixels, the action and scan count below 768, and the branch and created date below 1024.

The status badge moves too. On a desktop it has its own column; on a phone it sits beside the code's name, so you can still tell an expired code from a working one at a glance.

Two other things change on this page. The five filter dropdowns collapse behind a single **Filters** button, which carries a count of how many filters you have set, and the search box gets a row to itself instead of sharing one with the view toggle. The three figures at the top shorten their labels to **Total**, **Active** and **Scans**.

<Frame caption="The Filters button (1) replaces the filter row, and each code's details fold into a labelled list (2).">
  <img src="https://mintcdn.com/qtap/7M0_b7x2lukVABrg/images/merchants/getting-started/on-a-phone-qr-list.png?fit=max&auto=format&n=7M0_b7x2lukVABrg&q=85&s=a6822d15b45c15c18d0cbc1730cc0102" alt="The QR Codes page on a phone showing the Filters button and a folded code row" width="390" height="490" data-path="images/merchants/getting-started/on-a-phone-qr-list.png" />
</Frame>

Tap **Filters** and the dropdowns that apply to your account open in a two-column grid below the search box.

<Frame caption="Tapping Filters opens the dropdowns below the search box.">
  <img src="https://mintcdn.com/qtap/7M0_b7x2lukVABrg/images/merchants/getting-started/on-a-phone-qr-filters.png?fit=max&auto=format&n=7M0_b7x2lukVABrg&q=85&s=bbfa5f6d377a11e693c5965a7ef76383" alt="The QR Codes filters expanded on a phone" width="390" height="300" data-path="images/merchants/getting-started/on-a-phone-qr-filters.png" />
</Frame>

## What still wants a wider screen

<Warning>
  **The Staff page scrolls sideways.** Its table keeps all four columns at every width, inside a box that scrolls left and right. On a phone the Status and Joined columns and the row menu sit past the right edge, so you have to swipe the table itself to reach them. Nothing is broken, but Staff is easier to work on a laptop.
</Warning>

<Frame caption="The Staff table keeps its columns at phone width, so the right-hand ones sit past the edge.">
  <img src="https://mintcdn.com/qtap/7M0_b7x2lukVABrg/images/merchants/getting-started/on-a-phone-staff.png?fit=max&auto=format&n=7M0_b7x2lukVABrg&q=85&s=5f38b20ec42468308a502ff1d3443312" alt="The Staff table on a phone, cut off at the right edge" width="390" height="200" data-path="images/merchants/getting-started/on-a-phone-staff.png" />
</Frame>

The other one to know about is **Show to customer** on a QR code. The code it draws is a fixed 640 pixels wide, so on a phone held upright the edges are cut off and a camera cannot read it. Present codes from a screen about 640 pixels wide or more. [Showing a QR code on screen](/merchants/qr-codes/show-on-screen) covers that in full.

<Note>
  Nothing on screen warns you that you are on a small display. If a page looks cramped, that is the layout doing its best with the width it has, not an error.
</Note>

## The counter pages

Stamp Operations and Points Operations put their two cards side by side from 1024 pixels up and stack them into one column below that. A tablet in portrait gets the single-column version, which still holds the member search, the quantity field and the confirm step in the order staff work through them.

The redemption pages fold their history table the same way the members list does, and are covered in [Redeeming by scanning the customer's QR](/merchants/redemptions/scan-redemption).

For what the top bar itself does at each width, see [The top bar](/merchants/getting-started/top-bar).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.