Introduction

The bundled settings panel of DSH (DeepSeek Harness) uses a fixed layout: the navigation bar is 188px wide, and the content column is 800px wide. This layout is acceptable on desktop, but on narrow screens such as a 360px-wide phone, the navigation bar occupies too much space, leaving less than 76px of usable width for the content column and resulting in a poor reading experience.

dsh-settings-nav-collapse is a pure client-side plugin designed to solve this issue. It adds a toggle button to the settings panel title bar, collapsing the left navigation bar into a narrow icon rail, freeing up space, and allowing the content column to regain a readable width on mobile devices.

Core Features

  1. Title bar toggle button
    A button is added to the settings panel title bar (to the left of the close button), allowing switching between “rail (56px icon rail)” and “expanded” states. The button icon flips according to the state, and the aria-pressed attribute reflects the actual current state.

  2. Responsive default behavior

    • Narrow screens (≤640px) are collapsed by default.
    • Wide screens are expanded by default.
    • After a manual user toggle, the choice is remembered (stored in localStorage["dsh.settingsNav"]).

  3. Graceful degradation
    If the navigation bar has no inline SVG icons, it automatically falls back to compact mode (88px, retaining text labels). This avoids producing “an empty rail with nothing to click” on narrow screens.

  4. Content column scrolling and height adaptation

    • On narrow screens, the content column becomes a scrollable viewport (overflow:auto + overscroll-behavior:contain + momentum scrolling).
    • The dvh unit is used so that the panel height is not obscured by the browser address bar and toolbar.

  5. Ultra-narrow screen canvas and horizontal panning
    On ultra-narrow screens, the settings page is constrained to a 480px canvas, and users are allowed to pan horizontally, preventing setting items from being squeezed into single characters per line.

  6. Style isolation
    The plugin only applies styles to its own markup (html[data-dsh-settings-nav] + panel markup data-dsh-settings-nav-panel), does not rely on private package attributes, does not import the official client package, and does not use !important.

Installation and Activation

Install it using DSH’s plugin manager:

dsh plugin add @mengli114/dsh-settings-nav-collapse

After installation, restart the web client once. Open the settings panel, and you can see the newly added collapse button on the right side of the title bar.

Compatibility

Item Requirement
DSH version >=0.1.5-rc.1
Node version ^22.19.0 \|\| >=24.0.0
Browser features Requires MutationObserver, matchMedia, CSS min()/max(), and dvh (engines that do not support it automatically fall back to vh)

Known Trade-offs

  1. 480px canvas in expanded state: This is intentional. When a user manually expands the panel on a narrow screen, the actual content column width may be only about 92px, but the plugin still lays out at 480px and allows horizontal panning to preserve readability. If you prefer the expanded state to wrap according to the actual width, the relevant CSS rules need to be removed.
  2. No visual cue for horizontal panning: On ultra-narrow screens, some content is off-screen, and users must pan horizontally themselves.
  3. Hidden navigation title: In rail/compact modes, the title at the top of the navigation bar is hidden. However, if that node has data-modal-autofocus (an edge case), the plugin does not hide it in order to ensure initial focus on the modal layer.
  4. State storage: The state is saved in localStorage; different devices or browsers store their own preferences.

Conclusion

dsh-settings-nav-collapse is a practical utility optimized for mobile devices. Through simple collapsing logic, it solves the usability issues of the DSH settings panel on narrow screens. Its styling implementation adopts a markup-based strategy and has minimal interference with existing layouts.

Plugin details and source code are available at: https://github.com/meng-114/dsh-settings-nav-collapse