dsh-ui-mobile-layout

DSH is a desktop-first React application, and on a phone-sized viewport the three-column layout becomes cramped while the settings panel is nearly impossible to use. dsh-ui-mobile-layout steps in as a pure client-side bundle: it does not replace or modify any official slot occupant. On narrow viewports it restyles the frame shell and layers a full-screen overlay over the official settings panel, delivering a native-app-like browsing experience on mobile. Wide-screen behavior stays completely untouched because the plugin registers zero logic on desktop.

The plugin delivers two core capabilities. First, layout reflow: the desktop three-column scheme collapses into a single-column main area plus a left-side drawer. The drawer slides with a left offset rather than a CSS transform, which is a deliberate convention that keeps fixed-position modals from being trapped. Second, settings navigation: tapping the settings entry opens a full-screen list of entries, tapping any entry drills into its specific settings page, and a back arrow in the upper-left corner steps back one level at a time, mirroring the familiar phone-settings interaction.

This plugin is ideal for anyone who wants to use DSH on a phone or needs to debug layouts in a DevTools narrow viewport. One caveat: because the implementation overlays styles and behavior on the global frame and settings panel, other plugins that also do mobile restyling, rewrite the settings panel dialog structure, or use very high z-index full-screen layers may conflict. It is recommended to verify combinations in a dedicated instance before merging into daily use. The plugin is tested and confirmed working alongside the official base plugins such as shell, ui-settings-general, and ui-layout.