> For the complete documentation index, see [llms.txt](https://mozarkdocs.gitbook.io/appx_documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mozarkdocs.gitbook.io/appx_documentation/test-infrastructure-documentation/ui-and-navigation-behavior.md).

# UI and Navigation Behavior

## UI and Navigation Behavior

Use this page to understand how the portal behaves across navigation, notifications, errors, and themes.

### Light and dark mode

The portal supports both light and dark themes.

Click the sun or moon icon in the top navigation bar to switch themes.

Your preference is saved in browser local storage.

It persists across sessions and page refreshes.

<figure><img src="/files/OMIz7sSk5ZGsjCnHf8Rg" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/4Qax9nakNYwuElU9CIqR" alt=""><figcaption></figcaption></figure>

### Toast notifications

The portal uses toast notifications to show the outcome of actions.

Toasts appear near the bottom center of the screen.

They disappear automatically.

You do not need to dismiss them.

| Toast type  | What it signals                                                  | Example                                              |
| ----------- | ---------------------------------------------------------------- | ---------------------------------------------------- |
| **Success** | The action completed successfully.                               | `File deleted.` or `Note saved.`                     |
| **Error**   | The action failed, usually because of a server or network issue. | `Failed to load sessions.` or `Download failed.`     |
| **Warning** | The action cannot continue because a required step is missing.   | `Please select OS, browser, version and resolution.` |

### Loading states

When the portal fetches data from the backend, it shows a centered spinner in the main content area.

The spinner includes a descriptive label such as `Loading Sessions` or `Loading session details`.

This prevents partial UI states from appearing while data is still loading.

### Breadcrumbs

Every page shows a breadcrumb trail at the top of the main content area.

Each segment is clickable and takes you back up the navigation hierarchy.

The last segment represents the current page.

It appears as plain text, not a link.

Example:

`Interactive → Sessions → Session Summary`

Selecting **Sessions** returns you to the sessions list for the same platform.

<figure><img src="/files/7o4bbDyosOe1KbEKHA4n" alt=""><figcaption></figcaption></figure>

### Table behavior

The portal uses different table behaviors depending on the page:

* Session lists use server-side pagination.
* Smaller lists such as files use client-side pagination.
* Clicking a row in the Sessions table opens Session Details in a new browser tab.
* Clicking a row in the Files table opens the File Detail Panel inline.
* Column resizing is not currently supported.

Opening session rows in a new tab makes it easier to compare multiple sessions without losing the list.

### Sidebar collapse

Click the collapse arrow at the bottom of the sidebar to switch to icon-only mode.

In this mode, only icons remain visible.

Hover over an icon to see its label in a tooltip.

Click the expand arrow to restore full labels.

This setting persists for the current session.

It resets on page reload.

<figure><img src="/files/GFpNH86rt5zdRhQ9UwBS" alt=""><figcaption></figcaption></figure>

### External links

**Dashboard** and **Test Case Repository** in the sidebar are external links.

They open in a new browser tab.

They do not navigate within the Testing Portal.

These links point to other Mozark products in the broader quality management suite.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://mozarkdocs.gitbook.io/appx_documentation/test-infrastructure-documentation/ui-and-navigation-behavior.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.