From 14129770837985e8e1bbf767d5a6769503f20e2a Mon Sep 17 00:00:00 2001
From: LenAnderson <Anderson.Len@outlook.com>
Date: Thu, 18 Jul 2024 18:28:24 -0400
Subject: [PATCH] faPicker scroll just icons and icon alignment

---
 public/scripts/utils.js |  2 ++
 public/style.css        | 23 +++++++++++++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/public/scripts/utils.js b/public/scripts/utils.js
index 55b82211b..c023d70f6 100644
--- a/public/scripts/utils.js
+++ b/public/scripts/utils.js
@@ -1921,7 +1921,9 @@ export async function showFontAwesomePicker(customList = null) {
     const faList = customList ?? await fetchFa();
     const fas = {};
     const dom = document.createElement('div'); {
+        dom.classList.add('faPicker-container');
         const search = document.createElement('div'); {
+            search.classList.add('faQuery-container');
             const qry = document.createElement('input'); {
                 qry.classList.add('text_pole');
                 qry.classList.add('faQuery');
diff --git a/public/style.css b/public/style.css
index f8da6c1a7..6ca77474b 100644
--- a/public/style.css
+++ b/public/style.css
@@ -5346,16 +5346,31 @@ body:not(.movingUI) .drawer-content.maximized {
     color: #FAF8F6;
 }
 
-.popup.vertical_scrolling_dialogue_popup:has(.faPicker) {
+.popup:has(.faPicker) {
     /* Fix height for fa picker popup, otherwise search is making it resize weirdly */
     height: 70%;
+    .popup-content {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.faPicker-container {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;;
+}
+
+.faQuery-container {
+    flex: 0 0 auto;
 }
 
 .faPicker {
-	display: flex;
+    flex: 1 1 auto;
+    overflow: auto;
 	gap: 1em;
-	flex-wrap: wrap;
-	justify-content: space-between;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(3.5em, 1fr));
 
 	.menu_button {
 		aspect-ratio: 1 / 1;