ake/paperclip
1
0
Fork 0
mirror of https://github.com/alkimake/paperclip.git synced 2026-06-16 10:50:38 +09:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
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>
This commit is contained in:
dotta 2026-04-06 11:44:15 -05:00
parent dc842ff7ea
commit bf3fba36f2
1 changed files with 7 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

8
ui/src/components/ScrollToBottom.tsx
View file

@ -1,5 +1,7 @@
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { ArrowDown } from "lucide-react"; import { ArrowDown } from "lucide-react";
import { usePanel } from "../context/PanelContext";
import { cn } from "../lib/utils";
function resolveScrollTarget() { function resolveScrollTarget() {
const mainContent = document.getElementById("main-content"); const mainContent = document.getElementById("main-content");
@ -33,6 +35,7 @@ function distanceFromBottom(target: ReturnType<typeof resolveScrollTarget>) {
*/ */
export function ScrollToBottom() { export function ScrollToBottom() {
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const { panelVisible, panelContent } = usePanel();
useEffect(() => { useEffect(() => {
const check = () => { const check = () => {
@ -70,7 +73,10 @@ export function ScrollToBottom() {
return ( return (
<button <button
onClick={scroll} 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" aria-label="Scroll to bottom"
> >
<ArrowDown className="h-4 w-4" /> <ArrowDown className="h-4 w-4" />