fix: let the hover side menu overlay content instead of resizing it (Plugin-Remote-Desktop#2)

CHANGELOG.md

@@ -7,6 +7,10 @@
 - Hide sidebar after opening, in Customize Sidebar, closes the host list once you open a host
 - Sort the dashboard's Host Status card by name, IP address or status
 
+### Changed
+
+- The side menu now opens over the page when it expands on hover, so open sessions like remote desktop are not resized each time
+
 ### Fixed
 
 - Picking a section lower down in the host editor, like Warpgate, stuttered on the way and sometimes stopped before it got there

src/ui/sidebar/AppRail.tsx

@@ -312,10 +312,18 @@ 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;
+
   return (
     <div
       // The desktop app keeps the rail however narrow its window gets.
-      className={`${isElectron() ? "flex" : "hidden md:flex"} flex-col items-stretch bg-sidebar border-r border-border shrink-0 overflow-hidden pt-2 gap-1 transition-[width] duration-200 min-h-0`}
+      className={`${isElectron() ? "flex" : "hidden md:flex"} relative shrink-0 transition-[width] duration-200 min-h-0`}
+      style={{ width: rem(takesSpace ? 172 : 40) }}
+    >
+      <div
+        className="absolute inset-y-0 left-0 z-40 flex flex-col items-stretch bg-sidebar border-r border-border overflow-hidden pt-2 gap-1 transition-[width] duration-200 min-h-0"
         style={{ width: rem(railExpanded ? 172 : 40) }}
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
@@ -432,7 +440,9 @@ export function AppRail({
                   <Pin size={16} />
                 </RailIcon>
                 <RailLabel expanded={railExpanded}>
-                {pinned ? t("nav.collapseSideMenu") : t("nav.keepSideMenuOpen")}
+                  {pinned
+                    ? t("nav.collapseSideMenu")
+                    : t("nav.keepSideMenuOpen")}
                 </RailLabel>
               </button>
               <Rule expanded={railExpanded} />
@@ -455,7 +465,9 @@ export function AppRail({
               <RailIcon>
                 <LogOut size={16} />
               </RailIcon>
-            <RailLabel expanded={railExpanded}>{t("common.logout")}</RailLabel>
+              <RailLabel expanded={railExpanded}>
+                {t("common.logout")}
+              </RailLabel>
             </button>
           )}
         </div>
@@ -562,6 +574,7 @@ export function AppRail({
           </div>
         )}
       </div>
+    </div>
   );
 }
 

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

@@ -54,6 +54,18 @@ describe("AppRail", () => {
     expect(screen.queryByLabelText("common.logout")).toBeNull();
   });
 
+  it("expands over the content on hover without taking more room", () => {
+    renderRail();
+    const rail = screen
+      .getByLabelText("common.logout")
+      .closest(".absolute") as HTMLElement;
+    const slot = rail.parentElement as HTMLElement;
+    const collapsed = slot.style.width;
+    fireEvent.mouseEnter(rail);
+    expect(rail.style.width).not.toBe(collapsed);
+    expect(slot.style.width).toBe(collapsed);
+  });
+
   it("puts a footer item above the profile with its badge", async () => {
     registerRailItem({
       id: "inbox",