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

Enhancement: Make buttons scrollable

public/css/scrollable-button.css

@@ -0,0 +1,19 @@
+.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

@@ -2083,7 +2083,10 @@ async function buttonsCallback(args, text) {
             let popup;
 
             const buttonContainer = document.createElement('div');
-            buttonContainer.classList.add('flex-container', 'flexFlowColumn', 'wide100p', 'm-t-1');
+            buttonContainer.classList.add('flex-container', 'flexFlowColumn', 'wide100p');
+
+            const scrollableContainer = document.createElement('div');
+            scrollableContainer.classList.add('scrollable-buttons-container');
 
             for (const [result, button] of resultToButtonMap) {
                 const buttonElement = document.createElement('div');
@@ -2096,9 +2099,16 @@ async function buttonsCallback(args, text) {
                 buttonContainer.appendChild(buttonElement);
             }
 
+            scrollableContainer.appendChild(buttonContainer);
+
             const popupContainer = document.createElement('div');
             popupContainer.innerHTML = safeValue;
-            popupContainer.appendChild(buttonContainer);
+            popupContainer.appendChild(scrollableContainer);
+
+            // 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

@@ -9,6 +9,7 @@
 @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%;