Introduction

The settings panel of DeepSeek Harness (dsh) has a default width of 800px. When viewed in mobile browsers, this fixed width can lead to layout issues and make controls difficult to operate. The dsh-mobile-ui plugin solves this problem using CSS override techniques, adapting the modal originally designed for desktop environments to the mobile viewport.

Plugin Purpose

dsh-mobile-ui is a Responsive CSS override plugin. It is maintained by jackuh105 and is intended to adapt DSH’s desktop settings modal to the mobile viewport.

Core Features

In mobile browser environments with a viewport width of 680px or less, the plugin automatically adjusts the layout:

  1. Converts the 800px-wide desktop modal into a full-screen vertical form.
  2. Converts the left-side 188px navigation rail into a full-width, horizontally scrollable tab bar at the top.
  3. Pins the close button to the upper-right corner.
  4. The content area fills the remaining height, supports independent scrolling, and includes safe area padding.
  5. Allows regular settings rows to wrap, preventing controls from being squeezed off the screen.

Installation and Enablement

Before installation, ensure that the dsh configuration directory is the pnpm workspace root directory; some pnpm versions require the -w parameter.

Run the installation command:

dsh plugin --profile web add -w https://github.com/jackuh105/dsh-mobile-ui.git

After installation, restart the web profile:

dsh web

Verification and Usage

After the plugin takes effect, you can verify it by using the following methods:

  1. Open browser developer tools, inspect the HTML <head>, and confirm that it contains <style id="dsh-mobile-ui">.
  2. Reduce the desktop browser window width to less than 680px, open the settings panel, and observe the layout changes.

Notes

  1. Compatibility: The current CSS selectors target the structure of dsh 0.1.0-rc.6. If upgrading DSH changes class names, the selectors inside the plugin may need to be updated.
  2. Customization: If you need to modify the breakpoint (for example, changing 680px to another value), you can edit the CSS string in lib/index.js and then restart dsh web.

Summary

By introducing this plugin, developers can enjoy a more user-friendly DSH settings panel experience on mobile devices. See the links below for source code and updates.