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

# Widescreen, Zen mode, Clean Mode, and panel layout

> Customize page and message width, use Zen mode and Clean Mode to reduce clutter, and configure panel size and behavior — all configured per site.

export const ShortcutLegend = ({lang = "en"}) => {
  const isZh = lang === "zh";
  return <div className="ophel-shortcut-legend" role="note">
      <div className="ophel-shortcut-legend-title">
        {isZh ? "跨平台按键说明" : "Cross-platform key mapping"}
      </div>
      <div className="ophel-shortcut-legend-body">
        {isZh ? <>
            文档中的快捷键会同时显示 Windows/Linux 与 Mac 写法：
            <code>Ctrl</code> 对应 <code>Command</code>，
            <code>Alt</code> 对应 <code>Option</code>。唯一例外是提示词发送，
            <code>Ctrl+Enter</code> 在 Mac 上也使用 <code>Ctrl+Enter</code>。
          </> : <>
            Shortcuts show both Windows/Linux and Mac keys: <code>Ctrl</code> maps
            to <code>Command</code>, and <code>Alt</code> maps to
            <code>Option</code>. Prompt submit is the only exception:
            <code>Ctrl+Enter</code> remains <code>Ctrl+Enter</code> on Mac.
          </>}
      </div>
    </div>;
};

export const Shortcut = ({combo, mac, sameOnMac = false}) => {
  const keyLabels = {
    arrowup: {
      win: "Up",
      mac: "↑"
    },
    arrowdown: {
      win: "Down",
      mac: "↓"
    },
    arrowleft: {
      win: "Left",
      mac: "←"
    },
    arrowright: {
      win: "Right",
      mac: "→"
    },
    up: {
      win: "Up",
      mac: "↑"
    },
    down: {
      win: "Down",
      mac: "↓"
    },
    left: {
      win: "Left",
      mac: "←"
    },
    right: {
      win: "Right",
      mac: "→"
    },
    esc: {
      win: "Esc",
      mac: "Esc"
    },
    escape: {
      win: "Esc",
      mac: "Esc"
    },
    enter: {
      win: "Enter",
      mac: "Enter"
    },
    shift: {
      win: "Shift",
      mac: "⇧"
    },
    backslash: {
      win: "\\",
      mac: "\\"
    }
  };
  const modifierLabels = {
    ctrl: {
      win: "Ctrl",
      mac: "⌘"
    },
    control: {
      win: "Ctrl",
      mac: "⌘"
    },
    cmd: {
      win: "Ctrl",
      mac: "⌘"
    },
    command: {
      win: "Ctrl",
      mac: "⌘"
    },
    alt: {
      win: "Alt",
      mac: "⌥"
    },
    option: {
      win: "Alt",
      mac: "⌥"
    },
    shift: {
      win: "Shift",
      mac: "⇧"
    }
  };
  const normalizeToken = token => String(token || "").trim();
  const formatKey = (token, platform) => {
    const normalized = normalizeToken(token);
    const key = normalized.toLowerCase();
    const mapped = keyLabels[key];
    if (mapped) return mapped[platform];
    if (normalized.length === 1) return normalized.toUpperCase();
    return normalized;
  };
  const formatCombo = (value, platform) => String(value || "").split("+").map(normalizeToken).filter(Boolean).map(token => {
    const mapped = modifierLabels[token.toLowerCase()];
    return mapped ? mapped[platform] : formatKey(token, platform);
  }).join(platform === "mac" ? "" : "+");
  const windowsLabel = formatCombo(combo, "win");
  const macLabel = sameOnMac ? windowsLabel : mac || formatCombo(combo, "mac");
  const title = windowsLabel === macLabel ? windowsLabel : `Windows/Linux: ${windowsLabel}; Mac: ${macLabel}`;
  return <span className="ophel-shortcut" title={title}>
      <code>{windowsLabel}</code>
      {windowsLabel !== macLabel && <>
          <span className="ophel-shortcut-separator"> / </span>
          <code>{macLabel}</code>
        </>}
    </span>;
};

export const Icon = ({src, alt}) => <img src={typeof window !== "undefined" && typeof src === "string" && src.startsWith("/images/icons/") && (window.location.pathname === "/docs" || window.location.pathname.startsWith("/docs/")) ? `/docs${src}` : src} alt={alt} width="18" height="18" style={{
  display: "inline-block",
  verticalAlign: "-0.2em",
  margin: "0 0.15em"
}} />;

Ophel gives you fine-grained control over how AI pages are displayed. You can widen the reading area to use your full monitor, independently adjust your message bubble width, hide page chrome with Zen mode, and reduce ads or redundant page elements with Clean Mode. Layout settings are configured per site so each platform has its own values.

## Page width

Many AI platforms cap their content area to a narrow column, leaving wide margins on large screens. Ophel lets you set a custom maximum width to fill more of the screen.

**Settings → Site Settings → \[Select site] → Layout → Page Width**

* **Unit**: percentage of viewport width
* **Range**: 50%–100% (sliders are capped at 99% to preserve a sliver of the original platform chrome)
* Changes apply immediately; no page refresh needed.

### Smart Avoidance

**Settings → Site Settings → Layout → Smart Avoidance**

Smart Avoidance keeps the AI page visible while the Ophel panel is open. On supported sites, Ophel recalculates the chat safe area so messages, code blocks, input boxes, and right-side tool panels are not covered by the floating panel.

<video className="ophel-docs-video" controls muted playsInline preload="metadata" aria-label="Smart Avoidance demo showing the chat area moving away from the Ophel panel">
  <source src="https://mintcdn.com/urzeye/FnYdYOHdhaTeOTL9/images/panel/panel-aware-layout.mp4?fit=max&auto=format&n=FnYdYOHdhaTeOTL9&q=85&s=725d710d40051a39bd4dc480a980952f" type="video/mp4" data-path="images/panel/panel-aware-layout.mp4" />

  Your browser does not support embedded video. Open
  `/images/panel/panel-aware-layout.mp4` directly.
</video>

Smart Avoidance works with Page Width and the panel's current side. If keeping the chat area visible requires more space than the page has, Ophel may cap the effective page width even when the Page Width slider is set higher. This is expected: the setting prioritizes keeping the conversation usable instead of letting content sit under the panel.

## User message width

Your outgoing message bubbles have their own independent width control, separate from the overall content area. Widening them reduces the whitespace around your messages in conversations that use a wide content area.

**Settings → Site Settings → \[Select site] → Layout → User Message Width**

## Zen mode

Zen mode hides platform UI elements outside the conversation — sidebars, navigation bars, headers — so your focus stays on the content.

**How to enable:**

<Tabs>
  <Tab title="Keyboard shortcut">
    Press{" "}

    <Icon src="/docs/images/icons/keyboard.svg" alt="Keyboard shortcut icon" />

    {" "}

    <Shortcut combo="ctrl+shift+z" /> to toggle Zen mode.
  </Tab>

  <Tab title="Floating button">
    Click the{" "}

    <Icon src="/docs/images/icons/eye.svg" alt="Zen mode icon" />

    {" "}

    **Zen** button in the floating button group.
  </Tab>

  <Tab title="Settings (persistent)">
    Enable{" "}

    <Icon src="/docs/images/icons/settings.svg" alt="Settings icon" />

    {" "}

    **Settings → Site Settings → \[Select site] → Layout → Zen Mode** to enter
    Zen mode automatically every time you open that site.
  </Tab>
</Tabs>

<Note>
  Toggling Zen mode with the button or shortcut creates a temporary state that
  may not survive a page refresh. Enable it in Settings for a persistent effect
  on a specific site.
</Note>

### Zen exit button

When Zen mode is active, a small <Icon src="/docs/images/icons/eye-closed.svg" alt="Exit Zen mode icon" /> exit button appears on screen so you can leave Zen mode without using the keyboard shortcut. You can hide this button in **Settings → Site Settings → \[Select site] → Layout → Show Zen exit button** if you prefer to rely on the shortcut (<Shortcut combo="ctrl+shift+z" />) alone.

<Note>
  Zen mode hides elements based on Ophel's knowledge of each platform's DOM
  structure. The effect may be incomplete on some sites.
</Note>

## <Icon src="/docs/images/icons/clean-mode.svg" alt="Clean Mode icon" /> Clean Mode

Clean Mode hides page clutter such as disclaimers, ads, download prompts, promotional cards, and other non-conversation elements. It is enabled by default and configured per site.

**Settings → Site Settings → \[Select site] → Layout → Clean Mode**

Clean Mode is narrower than Zen mode: it keeps the normal platform layout visible, but removes elements Ophel recognizes as redundant. Zen mode focuses more aggressively by hiding sidebars and navigation; when Zen mode is enabled, it also includes the clean effect.

<Note>
  On ChatGPT, Clean Mode also hides sponsored cards when Ophel can identify
  them. Since each platform can change its page structure, some promotional
  elements may require future adapter updates.
</Note>

## Panel size and position

You can drag the panel by its title bar to reposition it anywhere on screen. **Double-clicking** the title bar toggles between <Icon src="/docs/images/icons/snap-to-edge.svg" alt="Edge Snap icon" /> Edge Snap and <Icon src="/docs/images/icons/floating-mode.svg" alt="Floating mode icon" /> Floating mode. Additional size and behavior settings are in <Icon src="/docs/images/icons/settings.svg" alt="Settings icon" /> **Settings → General → Panel**:

| Setting               | Description                                                                                                                                                      | Default  |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Panel mode            | <Icon src="/docs/images/icons/snap-to-edge.svg" alt="Edge Snap icon" /> Edge Snap or <Icon src="/docs/images/icons/floating-mode.svg" alt="Floating mode icon" /> Floating | Floating |
| Default side          | Left or right side of the screen                                                                                                                                 | Right    |
| Edge distance         | Distance from the screen edge when in Floating mode                                                                                                              | 0 px     |
| Panel width           | Saved panel width, 240–600 px                                                                                                                                    | 320 px   |
| Widen on hover (Beta) | Temporarily widens the Floating panel while your cursor or keyboard focus is on it                                                                               | Off      |
| Hover width (Beta)    | Temporary panel width used while hovering, 240–600 px                                                                                                            | 520 px   |
| Panel height          | 50–100 vh                                                                                                                                                        | 85 vh    |
| Snap threshold        | Distance from edge that triggers automatic snapping                                                                                                              | 30 px    |

When in Edge Snap mode, hover over the corresponding screen edge to pop the panel out for a preview. Drag the title bar away from the edge to switch to Floating mode.

### Resize the Floating panel directly

In Floating mode, a slim resize handle appears on the panel edge facing the page. Drag it to change **Panel width** without opening Settings. If the panel is on the right, drag the left edge; if the panel is on the left, drag the right edge. The new width is saved after you release the pointer.

### Temporary hover width

Enable **Widen on hover** when you want more room for long outline headings, conversation titles, or prompt names only while you are reading the panel. The panel expands to **Hover width** while your cursor or keyboard focus is inside it, then returns to the saved **Panel width** when you leave.

Hover widening only applies to Floating mode on devices with a mouse or trackpad. It does not change Edge Snap previews, launcher previews, or the saved panel width. If Smart Avoidance is enabled, temporary hover widening does not move the AI page; dragging the panel edge to save a new width does.