ui tweak fling

webui/src/components/HudOverlays/newgen/CornerPods/AccessoriesExpansion.jsx

@@ -16,22 +16,23 @@ export default function AccessoriesExpansion({ roverId }) {
 
   return (
     <div className="pointer-events-none absolute inset-y-0 left-0 z-20 flex items-center">
-      <AccessoriesToggle
-        label="Accessories"
-        ariaLabel={open ? 'Hide accessory controls' : 'Show accessory controls'}
-        onClick={() => setOpen(!open)}
-        hud
-        className="pointer-events-auto !h-28"
-      />
-      {open ? (
-        <div className="pointer-events-auto w-64 overflow-hidden rounded-r-xl bg-black/60 p-0.5">
-          {/* This is exactly the renderer mounted by AuxColumn. The desktop
-              wrapper changes available dimensions, never control behavior.
-              Content determines the normal panel height; max-height becomes a
-              scrolling boundary only for genuinely long accessory lists. */}
-          <RoverAccessoryControls roverId={roverId} className="max-h-[70vh]" />
-        </div>
-      ) : null}
+      {/* The tab remains attached to the video's left wall. When open, this
+          single shell grows around both the unchanged tab position and the
+          controls to its right, so the controls are not rendered as a second
+          disconnected panel. Its height follows content until the shared
+          renderer reaches the scrolling boundary. */}
+      <div className="pointer-events-auto flex max-h-[70vh] items-center overflow-hidden rounded-r-xl bg-black/60">
+        <AccessoriesToggle
+          label="Accessories"
+          ariaLabel={open ? 'Hide accessory controls' : 'Show accessory controls'}
+          onClick={() => setOpen(!open)}
+          hud
+          className="!h-28"
+        />
+        {open ? (
+          <RoverAccessoryControls roverId={roverId} className="w-64 max-h-[70vh]" />
+        ) : null}
+      </div>
     </div>
   );
 }