Preface

In the default layout of DSH Web GUI, the input bar and bottom status bar are attached to the bottom of the message scrolling container. This causes the scrollbar to cover the entire container, including the input bar and status bar. When scrolling up to view historical messages, message content slides underneath the input bar. Under semi-transparent skins (such as harbor), content may even show through, affecting the visual experience. dsh-composer-fix is designed to solve this layout issue.

Plugin Introduction

This is a layout fix plugin for DSH Web GUI. It moves the input bar and bottom status bar out of the scrolling area, ensuring that the scrollbar only covers the message area and that content does not bleed through the input bar.

Core Features

The plugin implements the following features:
1. Moves the input bar out of the scrolling area.
2. The scrollbar covers only the message area and ends above the input bar.
3. Message scrolling stops above the input bar, and content does not bleed through.
4. The input bar and bottom status bar are fixed to the bottom of the window.
5. In semi-transparent skins (such as harbor), it keeps the elements opaque to prevent content bleeding through.
6. Fixes alignment issues between the git branch chip and the input card.

Installation and Enabling

Use the following command to install the plugin:

dsh plugin --profile web add https://github.com/AnakinCao/dsh-composer-fix.git

After installation, refresh the page or restart dsh web to take effect.

Typical Usage

The plugin operates using CSS attribute selectors and does not move DOM nodes. It removes the data-conversation-scroll attribute from the scroll container, allowing the message list to regain its own scrolling capability.

Applicable Scenarios and Notes

  • The plugin uses stable attribute selectors and does not depend on CSS module hashed classes.
  • It does not move DOM nodes, avoiding React removeChild unmount crashes.
  • Compatibility: If the core is upgraded and the selectors remain valid, no changes are needed. If the core rewrites these attributes, only update lib/client.js in the plugin.
  • It works with semi-transparent skins (such as harbor) to prevent content bleeding through.

Table of Contents | Source Code