-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Enhancement: Make buttons scrollable #3004
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Enhancement: Make buttons scrollable #3004
Conversation
public/scripts/slash-commands.js
Outdated
| buttonContainer.classList.add('flex-container', 'flexFlowColumn', 'wide100p'); | ||
|
|
||
| const scrollableContainer = document.createElement('div'); | ||
| scrollableContainer.style.maxHeight = '50vh'; // Use viewport height instead of fixed pixels |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Try not to mix styles with code. Move that to a CSS file and set a class.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the review! I'll get to this on the weekend and will push out a commit.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Cohee1207 , I've addressed the comment and re-tested. Would you like me to re-upload videos of the feature still working? I tested on mobile and PC.
…com/joenunezb/SillyTavern into enhancement-make-buttons-scrollable
Cohee1207
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good now, thanks.
Adding a simple scrollbar to buttons created via
/buttonscommand. Tested with a simple QR CoT script. I also clicked around with LenAnderson's Codex and did not see any particular regressions.No errors reported in console log, tested a few variations of sizes with Chrome's device toolbar and everything looked fine.
Before:
PC:
before_Recording.2024-10-21.002601.mp4
Mobile (bonus):
before_Screen_Recording_20241021_002741_Chrome.mp4
After:
PC:
after_Recording.2024-10-21.000650.mp4
Mobile (bonus):
Screen_Recording_20241021_000517_Chrome.mp4
Checklist: