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

# Mobile Behavior

> How the embed widget adapts to mobile devices and small viewports.

The embed widget automatically adapts its layout on mobile devices (viewport width under 768px). No configuration is needed — the responsive behavior is built in.

***

## Tray on Mobile

On desktop, the tray opens a compact 583 × 800px panel. On mobile, it switches to a **full-screen overlay** for better usability on small screens.

|                | Desktop                        | Mobile                         |
| -------------- | ------------------------------ | ------------------------------ |
| **Trigger**    | Floating button (bottom-right) | Floating button (bottom-right) |
| **Open state** | Compact panel                  | Full-screen overlay            |
| **Close**      | Click outside or close button  | Close button                   |

***

## Full-screen on Mobile

No change — full-screen is already the same layout on both desktop and mobile.

***

## Chatbar on Mobile

The chatbar adapts its layout while keeping the inline input bar:

|                 | Desktop                        | Mobile                                |
| --------------- | ------------------------------ | ------------------------------------- |
| **Input bar**   | Fixed at bottom center         | Fixed at bottom center                |
| **Chat window** | Floating window above input    | Full-screen overlay with close handle |
| **Close**       | Pill close button above window | Drag handle at top of overlay         |

When the chat window is open on mobile, the widget container expands to fill the entire screen. When closed, it shrinks back to just the input bar.

***

## Detection

Mobile detection uses `window.innerWidth < 768`. This check runs when the widget is first created. If the user resizes the browser window after creation, the chatbar re-evaluates on open/close transitions.

<Note>
  The 768px breakpoint is not currently configurable. If you need different behavior at a specific breakpoint, you can conditionally set the `type` option based on your own viewport check before calling `embedWidget()`.
</Note>