Enhancement: Make buttons scrollable

b1b6f0473a2c20eea0fdab39620875c517485a18

Joe <joenunezb@gmail.com>

Parents: 7e9f5b8ee2dd56fc41f70b915dc244e9ce6a17ba

public/scripts/slash-commands.js+35 -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.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');

                 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' });
             popup.show()

@@ -4272,3 +4304,4 @@ sendTextarea.addEventListener('input', () => {
4272	4304	sendTextarea.style.fontFamily = null;
4273	4305	}
4274	4306	});
	4307	+