Right canvas rail cannot be hidden on mobile: `display: flex !important` overrides the Interface controls setting

[ncc1701dhs]

Summary

The Right canvas rail toggle under Settings -> Interface controls has no effect on mobile viewports. Turning it off for mobile leaves the rail visible on iPhone Safari (and any viewport <= 768px).

Desktop works correctly. The visibility state itself is computed correctly - the element is simply forced back into view by a CSS rule using !important.

Environment

Item	Value
Branch / commit	main @ 5ff106a2
Reproduced on	iPhone Safari (viewport <= 768px)
Affects	Any viewport where right-canvas-mobile-mode is active

Steps to Reproduce

1. Open the WebUI on a mobile device or a viewport <= 768px wide.
2. Go to Settings -> Interface controls.
3. Turn Right canvas rail off for mobile.
4. Return to the chat view.

Expected: the right canvas rail is hidden.

Actual: the right canvas rail is still displayed.

Root Cause

The rail's visibility is bound with x-show:

<!-- webui/components/canvas/right-canvas.html:28 -->
<nav class="right-canvas-rail" aria-label="Canvas surfaces"
     x-show="$store.preferences.isUiControlVisible('rightCanvasRail')">

Alpine's x-show hides an element by writing an inline display: none (without !important).

However, the mobile stylesheet forces the rail back on:

/* webui/components/canvas/right-canvas.css:343-347 */
body.right-canvas-mobile-mode .right-canvas-rail {
  position: fixed;
  top: 50%;
  right: max(0px, env(safe-area-inset-right));
  display: flex !important;   /* <-- overrides x-show */
  transform: translateY(-50%);
  pointer-events: auto;
}

A CSS !important declaration outranks an inline non-!important declaration, so the display: none written by x-show is discarded and the rail stays visible.

Verified as Working Correctly

These parts behave as intended and are not the cause:

Component	Location	Status
Visibility resolution	webui/components/sidebar/bottom/preferences/preferences-store.js:104-107	Correctly branches mobile/desktop
Mobile viewport detection	preferences-store.js:166 (innerWidth <= 768)	OK
Canvas mobile breakpoint	webui/components/canvas/right-canvas-store.js (MOBILE_BREAKPOINT = 768)	Consistent with the above
Body class toggle	right-canvas-store.js:571	Correctly toggles right-canvas-mobile-mode
Setting registration	webui/components/settings/settings-store.js:22	{ id: "rightCanvasRail", ... } present

For comparison, the time, connectionStatus, and projectSelector controls in webui/components/chat/top-section/chat-top.html use the same x-show pattern and are not affected, because no !important display rule targets them.

Suggested Fixes

Any one of the following would resolve it:

1. Drop the !important from the mobile rule (simplest, if the original specificity conflict it was added for no longer applies).
2. Switch x-show to x-if so the rail is not rendered at all when hidden - immune to CSS specificity entirely.
3. Scope the mobile rule so it does not apply when the control is disabled, e.g. by binding a class such as is-hidden and giving it display: none !important.

Option 2 is the most robust, since it removes the CSS-vs-Alpine precedence problem rather than fighting it.

Notes

Because webui/ is part of the core framework tree, users cannot patch this persistently - local edits are lost when the Docker image is updated. A fix in the upstream repository is needed.