diff --git a/ui/src/components/ScrollToBottom.tsx b/ui/src/components/ScrollToBottom.tsx
index d3da8981..793e85a0 100644
--- a/ui/src/components/ScrollToBottom.tsx
+++ b/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" />