fix emoji picker styling & update packages

android/app/src/main/assets/public/main.js

@@ -2528,11 +2528,11 @@ async function loadEmotes() {
         
         reactionPickerMenuHtml = `
 <div style="display: flex; flex-direction: column; gap: 0.4rem; padding: 0.2rem; min-width: 14rem;">
-    <input type="text" id="reaction-picker-search" placeholder="Type text / emoji..." oninput="filterReactions(this.value)" onkeydown="if(event.key === 'Enter') { if(this.value.trim() !== '') reactMessagePrompt(currentContextMenuMsgId, encodeURIComponent(this.value)); }" style="width: 100%; box-sizing: border-box; padding: 0.5rem 0.6rem; border-radius: 0.65rem; border: var(--border-width) solid var(--light-border-color); background: transparent; color: var(--text-color); font-family: inherit;">
+    <input type="text" id="reaction-picker-search" placeholder="Type text / emoji..." oninput="filterReactions(this.value)" onkeydown="if(event.key === 'Enter') { if(this.value.trim() !== '') reactMessagePrompt(currentContextMenuMsgId, encodeURIComponent(this.value)); }" style="width: auto; align-self: stretch; margin: 0; box-sizing: border-box; padding: 0.5rem 0.6rem; border-radius: 0.65rem; border: var(--border-width) solid var(--light-border-color); background: transparent; color: var(--text-color); font-family: inherit;">
     <div id="reaction-picker-grid" style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.2rem; max-height: 12rem; overflow-y: auto; overflow-x: hidden;">
         ${loadedEmotes.map(emoji => `<button onclick="reactMessagePrompt(currentContextMenuMsgId, encodeURIComponent('${emoji.char}'))" data-name="${emoji.name}" style="min-width: unset; width: 100%; aspect-ratio: 1; display: flex; justify-content: center; align-items: center; padding: 0; font-size: 1.2rem; border-radius: 0.65rem;" class="reaction-emoji-btn">${emoji.char}</button>`).join('')}
     </div>
-    <button onclick="reactMessagePrompt(currentContextMenuMsgId, encodeURIComponent(document.getElementById('reaction-picker-search').value))" style="margin: 0; padding: 0.5rem; justify-content: center; border-radius: 0.65rem; width: 100%;">
+    <button class="reaction-text-btn" onclick="reactMessagePrompt(currentContextMenuMsgId, encodeURIComponent(document.getElementById('reaction-picker-search').value))" style="margin: 0; padding: 0.5rem; justify-content: center; border-radius: 0.65rem; width: 100%;">
         <span class="blah">title.text.react</span>
     </button>
 </div>
@@ -2566,7 +2566,16 @@ function openReactionPicker(e) {
     let rect = fixedContextMenu.getBoundingClientRect();
     showFixedContextMenu({top: rect.top, right: rect.left, bottom: rect.top, left: rect.left}, reactionPickerMenuHtml);
     let searchInput = document.getElementById('reaction-picker-search');
-    if (searchInput) searchInput.focus();
+    if (searchInput) {
+        searchInput.addEventListener('focus', () => { //TODO: use code from resize event
+            setTimeout(() => {
+                let menuRect = fixedContextMenu.getBoundingClientRect();
+                if (menuRect.bottom > window.innerHeight) {
+                    fixedContextMenu.style.top = `${Math.max(10, window.innerHeight - menuRect.height - 10)}px`;
+                }
+            }, 500);
+        });
+    }
 }
 
 async function reactMessagePrompt(msgId, quickReaction = null) {

android/app/src/main/assets/public/style.css

@@ -749,4 +749,12 @@ sidebarelement:has(.icon-button:active) indicator:not(.active) {
     border: 0.15rem solid var(--text-color);
     border-radius: 0.8rem;
     transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem));
-}
+}
+.context-menu button.reaction-text-btn { 
+    background-color: rgba(255, 255, 255, 0.03); 
+    background: rgba(255, 255, 255, 0.05);
+}
+.context-menu button.reaction-text-btn:hover {
+    background-color: rgba(255, 255, 255, 0.06); 
+    background: rgba(255, 255, 255, 0.08);
+}

node_modules/@capacitor/app/android/build/intermediates/incremental/lintVitalAnalyzeRelease/release-artifact-libraries.xml

@@ -1,9 +1,9 @@
 <libraries>
   <library
       name=":@@:capacitor-android::release"
-      jars="/home/olcxja/.gradle/caches/8.14.3/transforms/a60990329a178b65acb9987d031670ff/transformed/out/jars/classes.jar:/home/olcxja/.gradle/caches/8.14.3/transforms/a60990329a178b65acb9987d031670ff/transformed/out/jars/libs/R.jar"
+      jars="/home/olcxja/.gradle/caches/8.14.3/transforms/7687406e09940ba1a8559cc8a3590167/transformed/out/jars/classes.jar:/home/olcxja/.gradle/caches/8.14.3/transforms/7687406e09940ba1a8559cc8a3590167/transformed/out/jars/libs/R.jar"
       resolved="android:capacitor-android:unspecified"
-      folder="/home/olcxja/.gradle/caches/8.14.3/transforms/a60990329a178b65acb9987d031670ff/transformed/out"
+      folder="/home/olcxja/.gradle/caches/8.14.3/transforms/7687406e09940ba1a8559cc8a3590167/transformed/out"
       manifest="AndroidManifest.xml"
       resFolder="res"
       assetsFolder="assets"

node_modules/@capacitor/status-bar/android/build/intermediates/incremental/lintVitalAnalyzeRelease/release-artifact-libraries.xml

@@ -1,9 +1,9 @@
 <libraries>
   <library
       name=":@@:capacitor-android::release"
-      jars="/home/olcxja/.gradle/caches/8.14.3/transforms/a60990329a178b65acb9987d031670ff/transformed/out/jars/classes.jar:/home/olcxja/.gradle/caches/8.14.3/transforms/a60990329a178b65acb9987d031670ff/transformed/out/jars/libs/R.jar"
+      jars="/home/olcxja/.gradle/caches/8.14.3/transforms/7687406e09940ba1a8559cc8a3590167/transformed/out/jars/classes.jar:/home/olcxja/.gradle/caches/8.14.3/transforms/7687406e09940ba1a8559cc8a3590167/transformed/out/jars/libs/R.jar"
       resolved="android:capacitor-android:unspecified"
-      folder="/home/olcxja/.gradle/caches/8.14.3/transforms/a60990329a178b65acb9987d031670ff/transformed/out"
+      folder="/home/olcxja/.gradle/caches/8.14.3/transforms/7687406e09940ba1a8559cc8a3590167/transformed/out"
       manifest="AndroidManifest.xml"
       resFolder="res"
       assetsFolder="assets"

webroot/main.js

@@ -2528,11 +2528,11 @@ async function loadEmotes() {
         
         reactionPickerMenuHtml = `
 <div style="display: flex; flex-direction: column; gap: 0.4rem; padding: 0.2rem; min-width: 14rem;">
-    <input type="text" id="reaction-picker-search" placeholder="Type text / emoji..." oninput="filterReactions(this.value)" onkeydown="if(event.key === 'Enter') { if(this.value.trim() !== '') reactMessagePrompt(currentContextMenuMsgId, encodeURIComponent(this.value)); }" style="width: 100%; box-sizing: border-box; padding: 0.5rem 0.6rem; border-radius: 0.65rem; border: var(--border-width) solid var(--light-border-color); background: transparent; color: var(--text-color); font-family: inherit;">
+    <input type="text" id="reaction-picker-search" placeholder="Type text / emoji..." oninput="filterReactions(this.value)" onkeydown="if(event.key === 'Enter') { if(this.value.trim() !== '') reactMessagePrompt(currentContextMenuMsgId, encodeURIComponent(this.value)); }" style="width: auto; align-self: stretch; margin: 0; box-sizing: border-box; padding: 0.5rem 0.6rem; border-radius: 0.65rem; border: var(--border-width) solid var(--light-border-color); background: transparent; color: var(--text-color); font-family: inherit;">
     <div id="reaction-picker-grid" style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.2rem; max-height: 12rem; overflow-y: auto; overflow-x: hidden;">
         ${loadedEmotes.map(emoji => `<button onclick="reactMessagePrompt(currentContextMenuMsgId, encodeURIComponent('${emoji.char}'))" data-name="${emoji.name}" style="min-width: unset; width: 100%; aspect-ratio: 1; display: flex; justify-content: center; align-items: center; padding: 0; font-size: 1.2rem; border-radius: 0.65rem;" class="reaction-emoji-btn">${emoji.char}</button>`).join('')}
     </div>
-    <button onclick="reactMessagePrompt(currentContextMenuMsgId, encodeURIComponent(document.getElementById('reaction-picker-search').value))" style="margin: 0; padding: 0.5rem; justify-content: center; border-radius: 0.65rem; width: 100%;">
+    <button class="reaction-text-btn" onclick="reactMessagePrompt(currentContextMenuMsgId, encodeURIComponent(document.getElementById('reaction-picker-search').value))" style="margin: 0; padding: 0.5rem; justify-content: center; border-radius: 0.65rem; width: 100%;">
         <span class="blah">title.text.react</span>
     </button>
 </div>
@@ -2566,7 +2566,16 @@ function openReactionPicker(e) {
     let rect = fixedContextMenu.getBoundingClientRect();
     showFixedContextMenu({top: rect.top, right: rect.left, bottom: rect.top, left: rect.left}, reactionPickerMenuHtml);
     let searchInput = document.getElementById('reaction-picker-search');
-    if (searchInput) searchInput.focus();
+    if (searchInput) {
+        searchInput.addEventListener('focus', () => { //TODO: use code from resize event
+            setTimeout(() => {
+                let menuRect = fixedContextMenu.getBoundingClientRect();
+                if (menuRect.bottom > window.innerHeight) {
+                    fixedContextMenu.style.top = `${Math.max(10, window.innerHeight - menuRect.height - 10)}px`;
+                }
+            }, 500);
+        });
+    }
 }
 
 async function reactMessagePrompt(msgId, quickReaction = null) {

webroot/style.css

@@ -749,4 +749,12 @@ sidebarelement:has(.icon-button:active) indicator:not(.active) {
     border: 0.15rem solid var(--text-color);
     border-radius: 0.8rem;
     transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem));
-}
+}
+.context-menu button.reaction-text-btn { 
+    background-color: rgba(255, 255, 255, 0.03); 
+    background: rgba(255, 255, 255, 0.05);
+}
+.context-menu button.reaction-text-btn:hover {
+    background-color: rgba(255, 255, 255, 0.06); 
+    background: rgba(255, 255, 255, 0.08);
+}