From b164084c0c9889c13958e221649171010137860f Mon Sep 17 00:00:00 2001
From: Joe <joenunezb@gmail.com>
Date: Mon, 21 Oct 2024 00:19:50 -0700
Subject: [PATCH] Enhancement: Make buttons scrollable

---
 public/scripts/slash-commands.js | 37 ++++++++++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/public/scripts/slash-commands.js b/public/scripts/slash-commands.js
index a34b4e544..6a4c5f63f 100644
--- a/public/scripts/slash-commands.js
+++ b/public/scripts/slash-commands.js
@@ -2074,7 +2074,32 @@ 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.style.maxHeight = '50vh'; // Use viewport height instead of fixed pixels
+            scrollableContainer.style.overflowY = 'auto';
+            scrollableContainer.style.WebkitOverflowScrolling = 'touch'; // Enable momentum scrolling on iOS
+            scrollableContainer.classList.add('m-t-1', 'scrollable-buttons');
+
+            // Add custom CSS for better mobile scrolling
+            const style = document.createElement('style');
+            style.textContent = `
+                .scrollable-buttons {
+                    -webkit-overflow-scrolling: touch;
+                    overflow-y: auto;
+                    flex-shrink: 1;
+                    min-height: 0;
+                }
+                .scrollable-buttons::-webkit-scrollbar {
+                    width: 6px;
+                }
+                .scrollable-buttons::-webkit-scrollbar-thumb {
+                    background-color: rgba(0, 0, 0, 0.2);
+                    border-radius: 3px;
+                }
+            `;
+            document.head.appendChild(style);
 
             for (const [result, button] of resultToButtonMap) {
                 const buttonElement = document.createElement('div');
@@ -2087,9 +2112,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' });
             popup.show()
@@ -4272,3 +4304,4 @@ sendTextarea.addEventListener('input', () => {
         sendTextarea.style.fontFamily = null;
     }
 });
+