Enhancement: Make buttons scrollable

b1b6f0473a2c20eea0fdab39620875c517485a18

Joe <joenunezb@gmail.com>

Parents: 7e9f5b8ee2dd56fc41f70b915dc244e9ce6a17ba
1 files changed, +35 -2Ignore whitespace
public/scripts/slash-commands.js+35 -2
@@ -2074,7 +2074,32 @@ async function buttonsCallback(args, text) {
2074 let popup;2074 let popup;
20752075
2076 const buttonContainer = document.createElement('div');2076 const buttonContainer = document.createElement('div');
2077 buttonContainer.classList.add('flex-container', 'flexFlowColumn', 'wide100p', 'm-t-1');2077 buttonContainer.classList.add('flex-container', 'flexFlowColumn', 'wide100p');
2078
2079 const scrollableContainer = document.createElement('div');
2080 scrollableContainer.style.maxHeight = '50vh'; // Use viewport height instead of fixed pixels
2081 scrollableContainer.style.overflowY = 'auto';
2082 scrollableContainer.style.WebkitOverflowScrolling = 'touch'; // Enable momentum scrolling on iOS
2083 scrollableContainer.classList.add('m-t-1', 'scrollable-buttons');
2084
2085 // Add custom CSS for better mobile scrolling
2086 const style = document.createElement('style');
2087 style.textContent = `
2088 .scrollable-buttons {
2089 -webkit-overflow-scrolling: touch;
2090 overflow-y: auto;
2091 flex-shrink: 1;
2092 min-height: 0;
2093 }
2094 .scrollable-buttons::-webkit-scrollbar {
2095 width: 6px;
2096 }
2097 .scrollable-buttons::-webkit-scrollbar-thumb {
2098 background-color: rgba(0, 0, 0, 0.2);
2099 border-radius: 3px;
2100 }
2101 `;
2102 document.head.appendChild(style);
20782103
2079 for (const [result, button] of resultToButtonMap) {2104 for (const [result, button] of resultToButtonMap) {
2080 const buttonElement = document.createElement('div');2105 const buttonElement = document.createElement('div');
@@ -2087,9 +2112,16 @@ async function buttonsCallback(args, text) {
2087 buttonContainer.appendChild(buttonElement);2112 buttonContainer.appendChild(buttonElement);
2088 }2113 }
20892114
2115 scrollableContainer.appendChild(buttonContainer);
2116
2090 const popupContainer = document.createElement('div');2117 const popupContainer = document.createElement('div');
2091 popupContainer.innerHTML = safeValue;2118 popupContainer.innerHTML = safeValue;
2092 popupContainer.appendChild(buttonContainer);2119 popupContainer.appendChild(scrollableContainer);
2120
2121 // Ensure the popup uses flex layout
2122 popupContainer.style.display = 'flex';
2123 popupContainer.style.flexDirection = 'column';
2124 popupContainer.style.maxHeight = '80vh'; // Limit the overall height of the popup
20932125
2094 popup = new Popup(popupContainer, POPUP_TYPE.TEXT, '', { okButton: 'Cancel' });2126 popup = new Popup(popupContainer, POPUP_TYPE.TEXT, '', { okButton: 'Cancel' });
2095 popup.show()2127 popup.show()
@@ -4272,3 +4304,4 @@ sendTextarea.addEventListener('input', () => {
4272 sendTextarea.style.fontFamily = null;4304 sendTextarea.style.fontFamily = null;
4273 }4305 }
4274});4306});
4307