review: Move css out of js code

9533b7e59a9f626f1ca9ad48238ffc634ae99ea3

Joe <joenunezb@gmail.com>

Parents: 6e85b20c8a1443d9ca75800787312d73652d9ebe
3 files changed, +21 -25Showing whitespace changes
public/css/scrollable-button.css+19 -0
@@ -0,0 +1,19 @@
1.scrollable-buttons-container {
2 max-height: 50vh; /* Use viewport height instead of fixed pixels */
3 overflow-y: auto;
4 -webkit-overflow-scrolling: touch; /* Momentum scrolling on iOS */
5 margin-top: 1rem; /* m-t-1 is equivalent to margin-top: 1rem; */
6 flex-shrink: 1;
7 min-height: 0;
8 scrollbar-width: thin;
9 scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
10}
11
12.scrollable-buttons-container::-webkit-scrollbar {
13 width: 6px;
14}
15
16.scrollable-buttons-container::-webkit-scrollbar-thumb {
17 background-color: rgba(255, 255, 255, 0.3);
18 border-radius: 3px;
19}
public/scripts/slash-commands.js+1 -25
@@ -2084,31 +2084,7 @@ async function buttonsCallback(args, text) {
2084 buttonContainer.classList.add('flex-container', 'flexFlowColumn', 'wide100p');2084 buttonContainer.classList.add('flex-container', 'flexFlowColumn', 'wide100p');
20852085
2086 const scrollableContainer = document.createElement('div');2086 const scrollableContainer = document.createElement('div');
2087 scrollableContainer.style.maxHeight = '50vh'; // Use viewport height instead of fixed pixels2087 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);
21122088
2113 for (const [result, button] of resultToButtonMap) {2089 for (const [result, button] of resultToButtonMap) {
2114 const buttonElement = document.createElement('div');2090 const buttonElement = document.createElement('div');
public/style.css+1 -0
@@ -9,6 +9,7 @@
9@import url(css/logprobs.css);9@import url(css/logprobs.css);
10@import url(css/accounts.css);10@import url(css/accounts.css);
11@import url(css/tags.css);11@import url(css/tags.css);
12@import url(css/scrollable-button.css);
1213
13:root {14:root {
14 --doc-height: 100%;15 --doc-height: 100%;