Bug type

Behavior bug (incorrect output/state without crash)

Summary

The .context-notice__icon SVG element in Control UI lacks proper dimension constraints, causing it to expand to the full size of the parent container and cover the entire chat window when the context usage warning appears.

Steps to reproduce

1. Open OpenClaw Control UI webchat interface
2. Have a conversation that uses significant context (approaching ~85% token limit threshold)
3. Wait for the context usage notice to appear (showing "X% context used")
4. Observe that the warning triangle SVG icon expands to fill the entire viewport, blocking the chat interface

Expected behavior

The warning icon (.context-notice__icon) should display as a small 24x24px icon inline with the context usage text, without expanding beyond its intended size.

Actual behavior

The SVG icon with class .context-notice__icon expands to fill the entire chat window because it lacks explicit width and height attributes or CSS constraints. The icon completely obscures the chat interface, making it unusable until the user manually modifies the SVG via browser dev tools (e.g., changing viewBox="0 0 24 24" to viewBox="0" as a workaround).

OpenClaw version

2026.3.13 (current npm package)

Operating system

Windows 11 (likely affects all OS - Chrome, Firefox, Edge tested)

Install method

npm global

Model

kimi-coding/k2p5 (not model-specific)

Provider / routing chain

openclaw -> direct provider (UI issue, not provider-specific)

Config file / key location

No response

Additional provider/model setup details

No response

Logs, screenshots, and evidence

Impact and severity

No response

Additional information

Root Cause Analysis

In the compiled file dist/control-ui/assets/index-CenotFkT.js (around line 843-844), the SVG is rendered without explicit width and height attributes:

<svg class="context-notice__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" ...>

SVGs without explicit dimensions default to 100% of the parent container width.

Suggested Fix

Option 1: Add width/height attributes to SVG:

<svg class="context-notice__icon" width="24" height="24" viewBox="0 0 24 24" ...>

Option 2: Add CSS (preferred):

.context-notice__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

File Location

dist/control-ui/assets/index-CenotFkT.js (rendered by the Zy function which displays the "X% context used" warning)