Introduction

In the DSH Web GUI, when the sidebar is collapsed, the width of the middle chat column is hard-coded to 748px (--dsh-chat-content-width: 748px). This causes unnecessary blank margins on large screens. Additionally, history message bubbles and statistics rows also have fixed width limits (525px and 620px). The dsh-chat-width plugin solves this by injecting CSS overrides for these CSS variables.

Plugin Introduction

This is a DSH Web GUI plugin maintained by AnakinCao. It makes the chat content column adapt to screen resolution, resolving the issue where the width remains fixed when the sidebar is collapsed.

Features

  • Screen adaptation: Makes the chat content column adapt to screen resolution (wider than 748px).
  • Sidebar collapse handling: Expands the middle area when the sidebar is collapsed.
  • CSS variable override: Overrides the CSS variable --dsh-chat-content-width.
  • Layout extension: Overrides the fixed width limit of history message bubbles (525px) and the fixed width limit of statistics rows (620px).
  • Dynamic adjustment rule: The default rule is max width = min(100%, clamp(900px, 72vw, 2560px)).

Installation

It is recommended to install using the following command:

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

After installation, please restart dsh web.

If you need a no-restart method, you can mount it manually:
1. Append the following content to ~/.dsh/profiles/web/cordis.patch.yml:

- insert:
    - id: dsh-chat-width
      name: 'dsh-chat-width'
  1. Place the repository contents under ~/.dsh/profiles/web/node_modules/dsh-chat-width/.

Please choose one installation method; do not mount it repeatedly.

Usage

The plugin provides two ways to adjust the width.

Code Adjustment

Edit the three constants at the top of lib/client.js. DSU client HMR will hot-update the changes (about 0.5 seconds), with no restart required:

  • ADAPTIVE_RATIO (default 0.72) — ratio of viewport width
  • MIN_WIDTH (default "900px") — lower bound
  • MAX_CAP (default "2560px") — upper bound (can be increased for 4K+)

Console Adjustment

You can also 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')        // Restore adaptive width

On page load, the console prints the current viewport and width rule.

Notes

  • Dependency environment: Requires the DSH 0.1.0-rc.6 web profile client plugin system.
  • Selector compatibility: Uses the [data-phase] selector to remain valid after conversation package updates (hashed class name changes).
  • Entry file: The main entry lib/index.js is a placeholder and is mounted by the loader.
  • License: MIT.
  • Ecosystem note: This plugin has no official affiliation with DeepSeek or High-Flyer, and exists only as an independent project in the community catalog.

Summary

This plugin resolves the sparse layout issue in the DSH Web GUI on large screens, improving screen utilization at different resolutions by calculating the width dynamically.