openclaw - ✅(Solved) Fix Web UI: new chat window stretches full width (regression) [1 pull requests, 1 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
openclaw/openclaw#68369Fetched 2026-04-18 05:53:05
View on GitHub
Comments
0
Participants
1
Timeline
3
Reactions
0
Participants
Timeline (top)
cross-referenced ×2referenced ×1

The "new chat" welcome state and message thread in the web dashboard stretch to the full width of the content area instead of being constrained to a readable column width.

This is a regression — the fix was previously implemented on branch issue-57235-web-sessions (commit 0df41d246c) but was never merged to main.

Root Cause

.chat-thread-inner has no max-width or width constraint — it inherits 100% from .chat-thread, which fills the entire content column. The same applies to .agent-chat__input.

Fix Action

Fixed

PR fix notes

PR #68370: Web UI: constrain chat thread and input to 920px max-width

Description (problem / solution / changelog)

Fixes #68369

Problem

The "new chat" welcome state and message thread stretch to the full width of the content area. This is a regression — the fix was implemented on branch issue-57235-web-sessions (commit 0df41d246c) but never merged to main.

Changes

ui/src/styles/chat/layout.css

  • Add .chat-thread-inner rule: width: min(100%, 920px); margin: 0 auto with flex layout and min-height: 100% for proper welcome state vertical centering
  • Update .chat-thread padding (removed old horizontal padding, now on inner)
  • Update .agent-chat__input: width: min(100%, 920px); margin: 8px auto 18px

ui/src/styles/layout.mobile.css

  • Add mobile overrides for .chat-thread-inner and .agent-chat__input to prevent double-padding/overflow on small screens

Verification

  • Confirmed .chat-thread-inner renders at 920px (down from 1286px thread width) on a 1440px viewport
  • .agent-chat__input matches at 920px
  • Welcome state properly centered within the constrained column

Changed files

  • .github/workflows/fork-npm-publish.yml (added, +107/-0)
  • .status.md (added, +233/-0)
  • README.md (modified, +43/-0)
  • package.json (modified, +2/-0)
  • pnpm-lock.yaml (modified, +3/-0)
  • pnpm-workspace.yaml (modified, +5/-0)
  • src/agents/pi-embedded-runner/run.incomplete-turn.test.ts (modified, +61/-0)
  • src/agents/pi-embedded-runner/run.timeout-triggered-compaction.test.ts (modified, +86/-0)
  • src/agents/pi-embedded-runner/run.ts (modified, +8/-4)
  • src/agents/pi-embedded-runner/run/attempt.ts (modified, +13/-3)
  • src/agents/pi-embedded-runner/run/incomplete-turn.ts (modified, +17/-0)
  • src/agents/pi-embedded-runner/run/preemptive-compaction.test.ts (modified, +57/-0)
  • src/agents/pi-embedded-runner/run/preemptive-compaction.ts (modified, +11/-0)
  • src/agents/pi-embedded-runner/run/types.ts (modified, +2/-0)
  • src/agents/transcript-policy.ts (modified, +4/-3)
  • src/channels/plugins/registry-loaded.ts (modified, +2/-2)
  • src/gateway/server-startup-stuck-session-replay.test.ts (added, +230/-0)
  • src/gateway/server-startup-stuck-session-replay.ts (added, +315/-0)
  • src/gateway/server.impl.ts (modified, +9/-0)
  • src/plugin-sdk/channel-runtime-context.ts (modified, +2/-1)
  • src/plugins/provider-replay-helpers.test.ts (modified, +11/-0)
  • src/plugins/provider-replay-helpers.ts (modified, +6/-1)
  • src/ui-app-settings.agents-files-refresh.test.ts (modified, +6/-0)
  • ui/src/i18n/locales/de.ts (modified, +2/-0)
  • ui/src/i18n/locales/en.ts (modified, +2/-0)
  • ui/src/i18n/locales/es.ts (modified, +2/-0)
  • ui/src/i18n/locales/pt-BR.ts (modified, +2/-0)
  • ui/src/i18n/locales/zh-CN.ts (modified, +2/-0)
  • ui/src/i18n/locales/zh-TW.ts (modified, +2/-0)
  • ui/src/styles/chat/layout.css (modified, +17/-6)
  • ui/src/styles/layout.css (modified, +102/-0)
  • ui/src/styles/layout.mobile.css (modified, +7/-1)
  • ui/src/ui/app-render.helpers.ts (modified, +19/-1)
  • ui/src/ui/app-render.ts (modified, +107/-2)
  • ui/src/ui/app-settings.ts (modified, +6/-0)
  • ui/src/ui/chat-model.test-helpers.ts (modified, +3/-0)
  • ui/src/ui/controllers/sessions.test.ts (modified, +111/-0)
  • ui/src/ui/controllers/sessions.ts (modified, +92/-3)
  • ui/src/ui/navigation.browser.test.ts (modified, +18/-0)
  • ui/src/ui/views/chat.browser.test.ts (modified, +11/-0)
  • ui/src/ui/views/chat.test.ts (modified, +93/-10)
  • ui/src/ui/views/chat.ts (modified, +1/-12)
  • ui/src/ui/views/dreaming.ts (modified, +6/-0)
RAW_BUFFERClick to expand / collapse

Description

The "new chat" welcome state and message thread in the web dashboard stretch to the full width of the content area instead of being constrained to a readable column width.

This is a regression — the fix was previously implemented on branch issue-57235-web-sessions (commit 0df41d246c) but was never merged to main.

Steps to Reproduce

  1. Open the web dashboard at http://127.0.0.1:18789/chat
  2. Click "New chat"
  3. Observe the welcome state and input bar stretch to the full width of the content area

Expected Behavior

The chat thread content (.chat-thread-inner) and input bar (.agent-chat__input) should be constrained to ~920px max-width and centered within the content area.

Root Cause

.chat-thread-inner has no max-width or width constraint — it inherits 100% from .chat-thread, which fills the entire content column. The same applies to .agent-chat__input.

extent analysis

TL;DR

Apply the previously implemented fix from branch issue-57235-web-sessions (commit 0df41d246c) to constrain the chat thread and input bar to a readable column width.

Guidance

  • Review the CSS styles applied to .chat-thread-inner and .agent-chat__input to ensure they have a max-width constraint, ideally set to ~920px.
  • Verify that the fix from branch issue-57235-web-sessions (commit 0df41d246c) is correctly merged into the main branch to resolve the regression.
  • Check the CSS inheritance hierarchy to ensure that .chat-thread does not override the intended max-width constraint for its child elements.
  • Test the web dashboard at http://127.0.0.1:18789/chat after applying the fix to confirm the chat thread and input bar are constrained to the expected width.

Example

No explicit code example is provided, but the fix likely involves adding a CSS rule similar to:

.chat-thread-inner, .agent-chat__input {
  max-width: 920px;
  margin: 0 auto; /* to center the elements */
}

Notes

The provided information implies a CSS styling issue, but without access to the actual codebase, the exact fix may vary. It is essential to review the CSS styles and inheritance hierarchy to ensure the fix is applied correctly.

Recommendation

Apply the workaround by merging the fix from branch issue-57235-web-sessions (commit 0df41d246c) into the main branch, as it is the most direct way to resolve the regression and constrain the chat thread and input bar to a readable column width.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

openclaw - ✅(Solved) Fix Web UI: new chat window stretches full width (regression) [1 pull requests, 1 participants]