UI Enhancements

dsh-web-mobile-fix

AcidGr/dsh-web-mobile-fix · ★ 9

AcidGrCurated

Mobile layout fixes for the Web UI on narrow screens: full-screen settings panel, one-row plugin nav, full-screen sidebar, centered popups, icon-only session-log button.

License
MIT
Added
2026-08-14
Maintenance
active
Install kind
npm
npm
dsh-web-mobile-fix
Manifest status
Declared
Manifest path
package.json#dsh
Manifest checked
2026-08-19
Lifecycle scripts
None found

Static manifest checks report declarations only; they are not compatibility or security review.

安装

dsh plugin --profile web add dsh-web-mobile-fix

从 npm 安装预构建包

For install and environment setup, plus plugin development tutorials, see DSH community docs ↗

Screenshots

README

Source README · body: en · Read Chinese README

Table of contents
  1. How it works
  2. Requirements
  3. Install
  4. Method 1: Ask your DSH Agent (Easiest 🤖)
  5. Method 2: CLI Install (Recommended)
  6. Method 3: Manual install (no pnpm / offline)
  7. Verify
  8. Rollback
  9. License

English | 简体中文

Mobile layout fixes for the DeepSeek Harness Web UI.

A pure client-side CSS overlay that repairs the worst mobile breakages on narrow (≤700px viewport) screens, without touching any product source:

  • Settings panel becomes a full-screen column layout instead of a squeezed desktop layout
  • Sidebar opens floating instead of squeezing the conversation
  • Settings nav tabs fit on a single horizontal row
  • Composer action bar fits on a single row without wrapping or layering

How it works

The plugin ships a browser half (exports["./client"], declared via dsh.client.platform: "web"), discovered by the client-modules scanner and loaded from the boot manifest. It injects one <style> tag with @media (max-width: 700px) overrides targeting the product's stable data-slot attributes, and removes the tag on unload — fully reversible.

Requirements

  • DeepSeek Harness Web profile (dsh --profile web), any recent 0.1.x release
  • Selectors target product slot contracts; they are stable within a version line but may need small updates after a major product revamp

Install

Method 1: Ask your DSH Agent (Easiest 🤖)

Just send this repository link directly to your DSH web chat and say:

"Install this plugin for me: https://github.com/AcidGr/dsh-web-mobile-fix"

Your DSH coding agent will automatically execute the installation command and set everything up for you.

Install from npm:

dsh plugin --profile web add dsh-web-mobile-fix

(Or install directly from GitHub:

dsh plugin --profile web add github:AcidGr/dsh-web-mobile-fix

)

After installation, simply refresh your browser.

Method 3: Manual install (no pnpm / offline)

PROFILE="$DSH_HOME/profiles/web"                 # adjust DSH_HOME and profile name
mkdir -p "$PROFILE/plugins" "$PROFILE/node_modules/@dsh-profile"
cp -r dsh-web-mobile-fix "$PROFILE/plugins/mobile-fix"
ln -sfn ../../plugins/mobile-fix "$PROFILE/node_modules/@dsh-profile/mobile-fix"
# append to $PROFILE/cordis.patch.yml:
#   - insert:
#       - id: mobile-fix
#         name: '@dsh-profile/mobile-fix'

Verify

Open the Web UI on a phone or resize your browser to mobile width (≤700px):

  • Click the whale logo to open the sidebar: it will smoothly open as an overlay drawer without squeezing your conversation content, and taps outside will collapse it;
  • The composer bar tools and the send button stay on a single row without wrapping or layering;
  • The settings modal displays as a full-screen vertical layout with scrollable tabs.

Rollback

  • Bundle install: dsh plugin --profile web remove dsh-web-mobile-fix
  • Manual install: delete the mobile-fix insert block from cordis.patch.yml (the plugin dir can stay or go)

No product source is modified; upgrades do not overwrite it.

License

MIT