feat: setting to let the hover side menu push content again

src/ui/locales/en.json

@@ -1674,6 +1674,8 @@
         "pinAppRailDesc": "Keep the left sidebar app rail always expanded instead of expanding on hover",
         "expandAppRailOnHover": "Expand App Rail on Hover",
         "expandAppRailOnHoverDesc": "Allow the left sidebar app rail to expand when the pointer moves over it",
+        "appRailHoverPushesContent": "Push content when it expands",
+        "appRailHoverPushesContentDesc": "Make room for the expanded rail instead of opening it over the page. Open sessions, like remote desktop, resize each time",
         "showPinAppRailButton": "Show Pin App Rail Button",
         "showPinAppRailButtonDesc": "Show a button in the app rail to pin it open. Off by default.",
         "settingsNavigation": "Navigation",

src/ui/settings/settings-search-index.ts

@@ -323,6 +323,8 @@ export const SETTINGS_SEARCH_INDEX: Record<string, string[]> = {
   ],
   "appearance": [
     "newUi.sidebar.userProfile.accentColorLabel",
+    "newUi.sidebar.userProfile.appRailHoverPushesContent",
+    "newUi.sidebar.userProfile.appRailHoverPushesContentDesc",
     "newUi.sidebar.userProfile.colorPickerTooltip",
     "newUi.sidebar.userProfile.commandPalette",
     "newUi.sidebar.userProfile.commandPaletteDesc",

src/ui/sidebar/AppRail.tsx

@@ -159,6 +159,9 @@ export function AppRail({
   const [showPinButton, setShowPinButton] = useState(() =>
     readRailPreference("showPinAppRailButton"),
   );
+  const [hoverPushes, setHoverPushes] = useState(() =>
+    readRailPreference("appRailHoverPushesContent"),
+  );
   const [menuPos, setMenuPos] = useState<{ x: number; y: number } | null>(null);
   const [menuTarget, setMenuTarget] = useState<MenuTarget | null>(null);
   const [managing, setManaging] = useState(false);
@@ -170,8 +173,11 @@ export function AppRail({
       setExpandOnHover(readRailPreference("expandAppRailOnHover"));
     const showPinButtonHandler = () =>
       setShowPinButton(readRailPreference("showPinAppRailButton"));
+    const pushHandler = () =>
+      setHoverPushes(readRailPreference("appRailHoverPushesContent"));
     window.addEventListener("pinAppRailChanged", pinHandler);
     window.addEventListener("expandAppRailOnHoverChanged", hoverHandler);
+    window.addEventListener("appRailHoverPushesContentChanged", pushHandler);
     window.addEventListener(
       "showPinAppRailButtonChanged",
       showPinButtonHandler,
@@ -179,6 +185,10 @@ export function AppRail({
     return () => {
       window.removeEventListener("pinAppRailChanged", pinHandler);
       window.removeEventListener("expandAppRailOnHoverChanged", hoverHandler);
+      window.removeEventListener(
+        "appRailHoverPushesContentChanged",
+        pushHandler,
+      );
       window.removeEventListener(
         "showPinAppRailButtonChanged",
         showPinButtonHandler,
@@ -313,8 +323,9 @@ export function AppRail({
   };
 
   // Expanding on hover draws over the content instead of pushing it, so open
-  // sessions like remote desktop are not resized each time.
-  const takesSpace = pinned || managing;
+  // sessions like remote desktop are not resized each time, unless the user
+  // asked for the old behavior.
+  const takesSpace = hoverPushes ? railExpanded : pinned || managing;
 
   return (
     <div

src/ui/sidebar/UserProfilePanel.tsx

@@ -553,6 +553,9 @@ export function UserProfilePanel({
   const [expandAppRailOnHover, setExpandAppRailOnHover] = useState(() =>
     readRailPreference("expandAppRailOnHover"),
   );
+  const [appRailHoverPushes, setAppRailHoverPushes] = useState(() =>
+    readRailPreference("appRailHoverPushesContent"),
+  );
   const [showPinAppRailButton, setShowPinAppRailButton] = useState(() =>
     readRailPreference("showPinAppRailButton"),
   );
@@ -1684,6 +1687,21 @@ export function UserProfilePanel({
                 }}
               />
             </SettingRow>
+            <SettingRow
+              label={t("newUi.sidebar.userProfile.appRailHoverPushesContent")}
+              description={t(
+                "newUi.sidebar.userProfile.appRailHoverPushesContentDesc",
+              )}
+            >
+              <FakeSwitch
+                checked={appRailHoverPushes}
+                disabled={!expandAppRailOnHover}
+                onChange={(v) => {
+                  setAppRailHoverPushes(v);
+                  setRailPreference("appRailHoverPushesContent", v);
+                }}
+              />
+            </SettingRow>
             <SettingRow
               label={t("newUi.sidebar.userProfile.showPinAppRailButton")}
               description={t(

src/ui/sidebar/rail-preferences.ts

@@ -1,14 +1,23 @@
 import { getUserPreferences, saveUserPreferences } from "@/api/open-tabs-api";
 
 export type RailPreference =
-  "pinAppRail" | "expandAppRailOnHover" | "showPinAppRailButton";
+  | "pinAppRail"
+  | "expandAppRailOnHover"
+  | "showPinAppRailButton"
+  | "appRailHoverPushesContent";
 
 const CHANGE_EVENT: Record<RailPreference, string> = {
   pinAppRail: "pinAppRailChanged",
   expandAppRailOnHover: "expandAppRailOnHoverChanged",
   showPinAppRailButton: "showPinAppRailButtonChanged",
+  appRailHoverPushesContent: "appRailHoverPushesContentChanged",
 };
 
+/** Kept on this device only; the server has no column for it. */
+const LOCAL_ONLY: ReadonlySet<RailPreference> = new Set([
+  "appRailHoverPushesContent",
+]);
+
 // pinAppRail and showPinAppRailButton default off, expandAppRailOnHover
 // defaults on, so each key needs its own read rather than a shared
 // === "true" check.
@@ -28,6 +37,7 @@ export function readRailPreference(key: RailPreference): boolean {
 export function setRailPreference(key: RailPreference, value: boolean): void {
   localStorage.setItem(key, String(value));
   window.dispatchEvent(new Event(CHANGE_EVENT[key]));
+  if (LOCAL_ONLY.has(key)) return;
   void getUserPreferences()
     .then((preferences) => {
       if (preferences.storageMode === "cloud") {

src/ui/tests/sidebar/AppRail.test.tsx

@@ -66,6 +66,17 @@ describe("AppRail", () => {
     expect(slot.style.width).toBe(collapsed);
   });
 
+  it("pushes the content on hover when the user asks for it", () => {
+    localStorage.setItem("appRailHoverPushesContent", "true");
+    renderRail();
+    const rail = screen
+      .getByLabelText("common.logout")
+      .closest(".absolute") as HTMLElement;
+    const slot = rail.parentElement as HTMLElement;
+    fireEvent.mouseEnter(rail);
+    expect(slot.style.width).toBe(rail.style.width);
+  });
+
   it("puts a footer item above the profile with its badge", async () => {
     registerRailItem({
       id: "inbox",