# Use the preview and check different screen sizes

Use Preview to click buttons, fill in forms, and check layouts at desktop, tablet, and phone widths. This guide walks through the main pages, fullscreen preview, and turning what you find into a change request.

## Before you start

Open a project with a saved app version and check the version number at the top. If generation is still running, wait for the task to save before trying the result.

This guide uses Client Notes Studio and fictional client records.

## Switch to Preview and try the page

1. Choose **Preview** in the canvas toolbar to interact with page buttons and forms.
2. Use **Select page** to open the page you need.
3. Try its main actions, such as searching, filtering, opening a record, and opening a new-client form.

[![Desktop canvas in Preview mode with an existing client and the search and filter controls.](https://ideamade.ai/help/en/preview-desktop.jpg)](https://ideamade.ai/help/en/preview-desktop.jpg)

_Try search, filters, and the new-client action in Preview._

A details page often needs an actual record. Opening it directly from the selector can show “Record does not exist.” Return to the list and open an existing client using the app’s own controls.

[![Opening Alex Chen from the list displays the existing client's information in a details panel.](https://ideamade.ai/help/en/preview-record-open.jpg)](https://ideamade.ai/help/en/preview-record-open.jpg)

_Open a client from the list to inspect its fields and actions. This example uses a details panel; your app may use a separate page._

## Check Desktop, Tablet, and Mobile

1. Choose **Desktop** and check navigation, lists, and forms.
2. Choose **Tablet** and observe navigation collapse, wrapping, and button placement.
3. Choose **Mobile** and try the same actions, checking readability and ease of use at phone width.

[![Client list in the tablet canvas with a narrower content area.](https://ideamade.ai/help/en/preview-tablet.jpg)](https://ideamade.ai/help/en/preview-tablet.jpg)

_The tablet canvas shows the same version in a narrower space._

[![Mobile canvas showing the client list with limited space for filters and table columns.](https://ideamade.ai/help/en/preview-mobile.jpg)](https://ideamade.ai/help/en/preview-mobile.jpg)

_The phone canvas clips some filter labels in this example. A follow-up request can adjust how the choices wrap._

Check that text is readable in full, buttons work, dialogs close, table fields are accessible, and filter choices fit. For a save workflow, enter a fictional record, save it, and reopen it to compare the stored values with your input.

[![New-client form opened inside the mobile canvas, showing fields and form actions.](https://ideamade.ai/help/en/preview-mobile-form.jpg)](https://ideamade.ai/help/en/preview-mobile-form.jpg)

_After opening the new-client form, check input, validation messages, and the saved record._

## Use fullscreen preview

Choose **Open fullscreen preview** in the toolbar to inspect a larger canvas. Device sizes and Edit/Preview modes remain available. Choose **Close fullscreen preview** to return to Builder.

[![Fullscreen preview of the client list with device controls and a close action at the top.](https://ideamade.ai/help/en/preview-fullscreen.jpg)](https://ideamade.ai/help/en/preview-fullscreen.jpg)

_Fullscreen gives you more preview space to inspect layouts and interactions._

## Describe a problem precisely

State the page, size, action, actual result, and expected result. For example:

> At phone width, client status labels are cut off. Make the filter choices wrap when space is limited, keeping every label visible and preserving search and filtering.

Follow [Request changes to your app](https://ideamade.ai/help/request-changes), then check the same scenario after a new version is saved. If the preview does not show the latest result, use **Refresh** in the canvas toolbar. See [Resolve preview loading problems and page errors](https://ideamade.ai/help/preview-troubleshooting) for further troubleshooting.

## Common questions

### What should I check on a real phone?

Try touch controls, the layout with the keyboard open, text input, and permission prompts in the browsers your users use. The canvas helps you check widths first; a real device adds the everyday usage experience.

### Why does clicking a button only highlight a component?

The canvas may be in Edit mode. Switch to Preview and try again.

### How do I make preview changes available to live users?

After checking the result, publish the current editing version. Follow [Restore versions and publish your app](https://ideamade.ai/help/versions-and-publishing) for the steps.