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

5f44fb8535b0c3feeec0398f5ad506456d59d3bd

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

Signed

public/css/scrollable-button.css+19 -0 Viewed

 +.scrollable-buttons-container {
 +    max-height: 50vh;  /* Use viewport height instead of fixed pixels */
 +    overflow-y: auto;
 +    -webkit-overflow-scrolling: touch; /* Momentum scrolling on iOS */
 +    margin-top: 1rem; /* m-t-1 is equivalent to margin-top: 1rem; */
 +    flex-shrink: 1;
 +    min-height: 0;
 +    scrollbar-width: thin;
 +    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
 +}
++
 +.scrollable-buttons-container::-webkit-scrollbar {
 +    width: 6px;
 +}
++
 +.scrollable-buttons-container::-webkit-scrollbar-thumb {
 +    background-color: rgba(255, 255, 255, 0.3);
 +    border-radius: 3px;
 +}

public/scripts/slash-commands.js+12 -2 Viewed

             let popup;
             const buttonContainer = document.createElement('div');
             buttonContainer.classList.add('flex-container', 'flexFlowColumn', 'wide100p', 'm-t-1');
++
 +            const scrollableContainer = document.createElement('div');
 +            scrollableContainer.classList.add('scrollable-buttons-container');
             for (const [result, button] of resultToButtonMap) {
                 const buttonElement = document.createElement('div');

                 buttonContainer.appendChild(buttonElement);
+            }
 +            scrollableContainer.appendChild(buttonContainer);
++
             const popupContainer = document.createElement('div');
             popupContainer.innerHTML = safeValue;
             popupContainer.appendChild(buttonContainerscrollableContainer);
++
 +            // Ensure the popup uses flex layout
 +            popupContainer.style.display = 'flex';
 +            popupContainer.style.flexDirection = 'column';
 +            popupContainer.style.maxHeight = '80vh'; // Limit the overall height of the popup
             popup = new Popup(popupContainer, POPUP_TYPE.TEXT, '', { okButton: 'Cancel', allowVerticalScrolling: true });
             popup.show()

public/style.css+1 -0 Viewed

 @import url(css/logprobs.css);
 @import url(css/accounts.css);
 @import url(css/tags.css);
 +@import url(css/scrollable-button.css);
 :root {
     --doc-height: 100%;