feat(web): add scroll to last message button

Add intelligent floating scroll button for long conversations that:
- Only appears when scrolling down (direction-aware)
- Auto-hides after 3 seconds of inactivity
- Stays visible on hover to prevent accidental disappearance
- Uses consistent design patterns with repo styling
- Includes proper accessibility features

🤖 Generated with [opencode](https://opencode.ai)

Co-Authored-By: Jeremy Osih <osih.jeremy@gmail.com>
Co-Authored-By: opencode <noreply@opencode.ai>
This commit is contained in:
Jeremy Osih
2025-06-27 00:38:14 +02:00
parent 5394b5188b
commit e950ad5306
2 changed files with 129 additions and 0 deletions

View File

@@ -760,3 +760,38 @@
}
}
}
.scrollButton {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.25rem;
border: 1px solid var(--sl-color-divider);
background-color: var(--sl-color-bg-surface);
color: var(--sl-color-text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.15s ease, opacity 0.5s ease;
z-index: 100;
appearance: none;
opacity: 1;
&:hover {
color: var(--sl-color-text);
border-color: var(--sl-color-hairline);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
&:active {
transform: translateY(1px);
}
svg {
display: block;
}
}