Responsive wiki list filters

pages/settings/index.html

@@ -204,11 +204,13 @@
     .radioGroup {
       display: flex;
     }
+
     .radioGroup.horizontal {
       flex-direction: row;
       line-height: 1.5rem;
       gap: .5em;
     }
+
     .radioGroup.vertical {
       flex-direction: column;
       gap: .5em;
@@ -279,18 +281,33 @@
     }
 
     #wikiFiltersContainer {
+      width: fit-content;
+      margin: 0 auto;
+    }
+
+    #wikiFiltersContainer>div {
       display: grid;
       gap: 0.5em;
       grid-template-columns: 1fr 1fr;
       margin: 1em auto;
-      width: 30em;
+      max-width: 30em;
     }
 
-    #wikiFiltersContainer div {
+    #wikiFiltersContainer>div>div {
       text-align: right;
       align-self: end;
     }
 
+    @media (max-width: 35em) {
+      #wikiFiltersContainer>div {
+        grid-template-columns: 1fr;
+      }
+
+      #wikiFiltersContainer>div>div {
+        text-align: center;
+      }
+    }
+
     .toggles {
       font-size: 0.8rem;
       white-space: nowrap;
@@ -605,8 +622,8 @@
         </fieldset>
         <fieldset id="breezewikiSettings">
           <legend>
-            <span aria-hidden="true">༄</span> BreezeWiki alternative frontend for Fandom (<a id="breeezwikiLearnMore" href="https://breezewiki.com/"
-              target="_blank">learn more</a>)
+            <span aria-hidden="true">༄</span> BreezeWiki alternative frontend for Fandom (<a id="breeezwikiLearnMore"
+              href="https://breezewiki.com/" target="_blank">learn more</a>)
           </legend>
           <div role="radiogroup">
             <div class="radioGroup vertical">
@@ -634,7 +651,8 @@
             </label>
             <label id="breezewikiCustomHost">
               Custom BreezeWiki domain:
-              <input type="text" id="customBreezewikiHost" name="customBreezewikiHost" placeholder="bw.example.com" size="30" />
+              <input type="text" id="customBreezewikiHost" name="customBreezewikiHost" placeholder="bw.example.com"
+                size="30" />
               <button id="setCustomBreezewikiDomain" type="button">
                 Set domain
               </button>
@@ -647,7 +665,8 @@
           <legend>
             <span aria-hidden="true">ℹ️</span> Icon legend
           </legend>
-          <span class="text-sm">When visiting Fandom, Fextralife, or Neoseeker wikis with an independent alternative, IWB
+          <span class="text-sm">When visiting Fandom, Fextralife, or Neoseeker wikis with an independent alternative,
+            IWB
             can:</span>
           <div>
             <div>
@@ -678,6 +697,7 @@
           </div>
         </fieldset>
         <div id="wikiFiltersContainer">
+          <div>
             <div id="langSelectCaption">Filter wikis by language:</div>
             <select name="lang" id="langSelect">
               <option value="ALL" selected>All languages</option>
@@ -699,9 +719,12 @@
               <option value="UK">[UK] Ukrainian / Українська</option>
               <option value="ZH">[ZH] Chinese / 中文</option>
             </select>
+          </div>
+          <div>
             <div id="filterInputCaption">Filter wikis by name:</div>
             <input id="filterInput" type="text" name="filterInput" placeholder="Enter wiki name..." />
           </div>
+        </div>
         <div class="sticky">
           <div id="togglesColumnLabels" class="toggles">
             <div>