Offset scroll-to-bottom button when properties panel is open

On desktop, the floating scroll-to-bottom button now shifts left
to stay clear of the properties panel when it's open (320px + margin).
Mobile positioning is unchanged.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/components/ScrollToBottom.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { ArrowDown } from "lucide-react";
+import { usePanel } from "../context/PanelContext";
+import { cn } from "../lib/utils";
 
 function resolveScrollTarget() {
   const mainContent = document.getElementById("main-content");
@@ -33,6 +35,7 @@ function distanceFromBottom(target: ReturnType<typeof resolveScrollTarget>) {
  */
 export function ScrollToBottom() {
   const [visible, setVisible] = useState(false);
+  const { panelVisible, panelContent } = usePanel();
 
   useEffect(() => {
     const check = () => {
@@ -70,7 +73,10 @@ export function ScrollToBottom() {
   return (
     <button
       onClick={scroll}
-      className="fixed bottom-[calc(1.5rem+5rem+env(safe-area-inset-bottom))] right-6 z-40 flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background shadow-md hover:bg-accent transition-colors md:bottom-6"
+      className={cn(
+        "fixed bottom-[calc(1.5rem+5rem+env(safe-area-inset-bottom))] right-6 z-40 flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background shadow-md hover:bg-accent transition-[background-color,right] duration-200 md:bottom-6",
+        panelVisible && panelContent && "md:right-[calc(320px+1.5rem)]",
+      )}
       aria-label="Scroll to bottom"
     >
       <ArrowDown className="h-4 w-4" />