| 2084 | 2084 | buttonContainer.classList.add('flex-container', 'flexFlowColumn', 'wide100p'); |
| 2085 | 2085 | |
| 2086 | 2086 | const scrollableContainer = document.createElement('div'); |
| 2087 | | - scrollableContainer.style.maxHeight = '50vh'; // Use viewport height instead of fixed pixels |
| 2087 | + scrollableContainer.classList.add('scrollable-buttons-container'); |
| 2088 | | - scrollableContainer.style.overflowY = 'auto'; |
| 2089 | | - scrollableContainer.style.WebkitOverflowScrolling = 'touch'; // Enable momentum scrolling on iOS |
| 2090 | | - scrollableContainer.classList.add('m-t-1', 'scrollable-buttons'); |
| 2091 | | - |
| 2092 | | - // Add custom CSS for better mobile scrolling |
| 2093 | | - const style = document.createElement('style'); |
| 2094 | | - style.textContent = ` |
| 2095 | | - .scrollable-buttons { |
| 2096 | | - -webkit-overflow-scrolling: touch; |
| 2097 | | - overflow-y: auto; |
| 2098 | | - flex-shrink: 1; |
| 2099 | | - min-height: 0; |
| 2100 | | - scrollbar-width: thin; |
| 2101 | | - scrollbar-color: rgba(255, 255, 255, 0.3) transparent; |
| 2102 | | - } |
| 2103 | | - .scrollable-buttons::-webkit-scrollbar { |
| 2104 | | - width: 6px; |
| 2105 | | - } |
| 2106 | | - .scrollable-buttons::-webkit-scrollbar-thumb { |
| 2107 | | - background-color: rgba(255, 255, 255, 0.3); |
| 2108 | | - border-radius: 3px; |
| 2109 | | - } |
| 2110 | | - `; |
| 2111 | | - document.head.appendChild(style); |
| 2112 | 2088 | |
| 2113 | 2089 | for (const [result, button] of resultToButtonMap) { |
| 2114 | 2090 | const buttonElement = document.createElement('div'); |