Back to home

AnakinCao

dsh-chat-width

DSH Web GUI plugin: adaptive chat content width — the middle area expands with screen resolution (1080p/2K/4K) when side panels are collapsed (injects CSS overriding --dsh-chat-content-width)

Stars
0
Language
JavaScript
Created
Aug 16, 2026
Updated
Aug 16, 2026

Introduction

dsh-chat-width

简体中文: README.zh.md

A small DSH (DeepSeek Harness) Web GUI plugin that makes the chat content column adapt to the screen resolution — when both side panels are collapsed, the middle area no longer stays stuck at the fixed 748px.

What it does

The DSH chat content column is hard-coded to 748px (--dsh-chat-content-width: 748px), so the middle area stays narrow with large empty margins even after both side panels are collapsed. This plugin injects CSS that overrides the width to min(100%, adaptive cap):

  • Side panels open → the content column fills the center column exactly;
  • Both collapsed → the column grows with the current screen/window resolution, up to the cap;
  • Historical user message bubbles follow the same width (overrides the fixed 525px cap);
  • The stats row below the input box (the live-stats TPS merge row) follows it too (overrides the fixed 620px cap).

Install

Method 1 — recommended, one command (restart dsh web afterwards):

dsh plugin --profile web add https://github.com/AnakinCao/dsh-chat-width.git

Method 2 — no restart (manual mount): append to ~/.dsh/profiles/web/cordis.patch.yml:

- insert:
    - id: dsh-chat-width
      name: 'dsh-chat-width'

and place the repository content under ~/.dsh/profiles/web/node_modules/dsh-chat-width/ (or pnpm add), then refresh the page once.

Pick ONE method — never mount twice.

Adaptive rule (default)

max width = min(100%, clamp(900px, 72vw, 2560px))
ViewportContent width
1366×768≈983px
1920×1080≈1382px
2560×1440≈1843px
3840×21602560px (cap)

Tracks window size changes live — no refresh needed.

Tuning

Edit the three constants at the top of lib/client.js — changes hot-apply via DSH client HMR (~0.5s), no restart / no refresh:

  • ADAPTIVE_RATIO (default 0.72) — fraction of the viewport width
  • MIN_WIDTH (default "900px") — lower bound
  • MAX_CAP (default "2560px") — upper bound (raise it for 4K+)

Or force a fixed width from the browser console (takes effect after refresh):

localStorage.setItem('dsh-chat-width.max', '1920px')  // fixed 1920px
localStorage.removeItem('dsh-chat-width.max')          // back to adaptive

A console log line prints the active viewport and width rule on page load.

Uninstall

  • Installed via method 1: dsh plugin --profile web remove dsh-chat-width, then restart dsh web;
  • Installed via method 2: remove the insert entry from the profile cordis.patch.yml and delete ~/.dsh/profiles/web/node_modules/dsh-chat-width/, then refresh the page.

Compatibility

  • Requires the DSH 0.1.0-rc.6 web profile client plugin system (dsh web, window.__ModuleLoader__ bundle format).
  • Selectors target the conversation root's stable [data-phase] attribute with doubled specificity, so the override keeps working after the conversation package updates (hashed class names change).
  • The host half (lib/index.js) is a no-op placeholder so the loader entry mounts.

License

MIT