Merge pull request #3004 from joenunezb/enhancement-make-buttons-scrollable Enhancement: Make buttons scrollable

5f44fb8535b0c3feeec0398f5ad506456d59d3bd

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed
Parents: 26aad5fa80966e3f8846573127758ff19ed627ec 9533b7e59a9f626f1ca9ad48238ffc634ae99ea3
3 files changed, +32 -2Ignore whitespace
public/css/scrollable-button.css+19 -0
@@ -0,0 +1,19 @@
1.scrollable-buttons-container {
2 max-height: 50vh; /* Use viewport height instead of fixed pixels */
3 overflow-y: auto;
4 -webkit-overflow-scrolling: touch; /* Momentum scrolling on iOS */
5 margin-top: 1rem; /* m-t-1 is equivalent to margin-top: 1rem; */
6 flex-shrink: 1;
7 min-height: 0;
8 scrollbar-width: thin;
9 scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
10}
11
12.scrollable-buttons-container::-webkit-scrollbar {
13 width: 6px;
14}
15
16.scrollable-buttons-container::-webkit-scrollbar-thumb {
17 background-color: rgba(255, 255, 255, 0.3);
18 border-radius: 3px;
19}
public/scripts/slash-commands.js+12 -2
@@ -2083,7 +2083,10 @@ async function buttonsCallback(args, text) {
2083 let popup;2083 let popup;
20842084
2085 const buttonContainer = document.createElement('div');2085 const buttonContainer = document.createElement('div');
2086 buttonContainer.classList.add('flex-container', 'flexFlowColumn', 'wide100p', 'm-t-1');2086 buttonContainer.classList.add('flex-container', 'flexFlowColumn', 'wide100p');
2087
2088 const scrollableContainer = document.createElement('div');
2089 scrollableContainer.classList.add('scrollable-buttons-container');
20872090
2088 for (const [result, button] of resultToButtonMap) {2091 for (const [result, button] of resultToButtonMap) {
2089 const buttonElement = document.createElement('div');2092 const buttonElement = document.createElement('div');
@@ -2096,9 +2099,16 @@ async function buttonsCallback(args, text) {
2096 buttonContainer.appendChild(buttonElement);2099 buttonContainer.appendChild(buttonElement);
2097 }2100 }
20982101
2102 scrollableContainer.appendChild(buttonContainer);
2103
2099 const popupContainer = document.createElement('div');2104 const popupContainer = document.createElement('div');
2100 popupContainer.innerHTML = safeValue;2105 popupContainer.innerHTML = safeValue;
2101 popupContainer.appendChild(buttonContainer);2106 popupContainer.appendChild(scrollableContainer);
2107
2108 // Ensure the popup uses flex layout
2109 popupContainer.style.display = 'flex';
2110 popupContainer.style.flexDirection = 'column';
2111 popupContainer.style.maxHeight = '80vh'; // Limit the overall height of the popup
21022112
2103 popup = new Popup(popupContainer, POPUP_TYPE.TEXT, '', { okButton: 'Cancel', allowVerticalScrolling: true });2113 popup = new Popup(popupContainer, POPUP_TYPE.TEXT, '', { okButton: 'Cancel', allowVerticalScrolling: true });
2104 popup.show()2114 popup.show()
public/style.css+1 -0
@@ -9,6 +9,7 @@
9@import url(css/logprobs.css);9@import url(css/logprobs.css);
10@import url(css/accounts.css);10@import url(css/accounts.css);
11@import url(css/tags.css);11@import url(css/tags.css);
12@import url(css/scrollable-button.css);
1213
13:root {14:root {
14 --doc-height: 100%;15 --doc-height: 100%;