From 02fd9f658a179aaac4d6a1cb0d59e4471a96acdf Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Mon, 29 Mar 2021 20:10:26 +0100
Subject: [PATCH] added groups to correct title and input spacing

---
 src/js/popups/word-filter-popup.js |  4 +++-
 src/sass/style.scss                | 21 +++++++++++++--------
 static/index.html                  | 30 +++++++++++++++++++-----------
 3 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/src/js/popups/word-filter-popup.js b/src/js/popups/word-filter-popup.js
index 88b2c58a9..47024d696 100644
--- a/src/js/popups/word-filter-popup.js
+++ b/src/js/popups/word-filter-popup.js
@@ -12,7 +12,9 @@ export async function showWordFilterPopup() {
             <option value=${language}>${prettyLang}</option>
         `);
   });
-  $("#languageList").select2();
+  $("#languageList").select2({
+    width: "100%",
+  });
 }
 
 function hideWordFilterPopup() {
diff --git a/src/sass/style.scss b/src/sass/style.scss
index 1a5f61541..ed63fd971 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -636,23 +636,28 @@ a:hover {
     gap: 1rem;
     width: 400px;
 
+    input {
+      width: 100%;
+    }
+
+    .group {
+      display: grid;
+      gap: 0.5rem;
+    }
+
     .lengthgrid {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      grid-template-rows: 1fr 1fr;
-      gap: 0.2rem;
+      grid-template-rows: auto 1fr;
+      column-gap: 1rem;
     }
 
-    .wordLength {
-      width: 10rem;
-    }
-
-    .wftip {
+    .tip {
       color: var(--sub-color);
       font-size: 0.8rem;
     }
 
-    .wfload {
+    .loadingIndicator {
       justify-self: center;
     }
   }
diff --git a/static/index.html b/static/index.html
index dc8caacdd..a061ff563 100644
--- a/static/index.html
+++ b/static/index.html
@@ -146,11 +146,13 @@
     </div>
     <div id="wordFilterPopupWrapper" class="hidden">
       <div id="wordFilterPopup">
-        <div class="wftitle">language</div>
-        <select id="languageList" class=""></select>
-        <div class="lengthgrid">
-          <div class="wftitle">min length</div>
-          <div class="wftitle">max length</div>
+        <div class="group">
+          <div class="title">language</div>
+          <select id="languageList" class=""></select>
+        </div>
+        <div class="group lengthgrid">
+          <div class="title">min length</div>
+          <div class="title">max length</div>
           <input
             id="wordMin"
             class="wordLength"
@@ -164,15 +166,21 @@
             type="number"
           />
         </div>
-        <div class="wftitle">include</div>
-        <input id="wordFilter" autocomplete="off" />
-        <div class="wftitle">exclude</div>
-        <input id="wordExclude" autocomplete="off" />
-        <div class="wftip">
+        <div class="group">
+          <div class="title">include</div>
+          <input id="wordFilter" autocomplete="off" />
+        </div>
+        <div class="group">
+          <div class="title">exclude</div>
+          <input id="wordExclude" autocomplete="off" />
+        </div>
+        <div class="tip">
           Use the above filters to include and exclude words or characters
           (separated by spaces)
         </div>
-        <i class="fas fa-fw fa-spin fa-circle-notch hidden wfload"></i>
+        <i
+          class="fas fa-fw fa-spin fa-circle-notch hidden loadingIndicator"
+        ></i>
         <div class="button">ok</div>
       </div>
     </div>