From b7a6c986d959f913f1616658dd52a44e65646d4c Mon Sep 17 00:00:00 2001
From: Captain ALM <captainalm@captainalm.com>
Date: Fri, 29 Jul 2022 21:19:21 +0100
Subject: [PATCH] .

---
 base.css      | 18 ++++++++++++------
 dark.css      |  2 +-
 index.go.html |  2 +-
 light.css     |  2 +-
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/base.css b/base.css
index 76ee278..d4dca3f 100644
--- a/base.css
+++ b/base.css
@@ -80,7 +80,7 @@ main{
     max-width: 50%;
     width: 50%;
 }
-.so-pane > form > div > span{
+.so-pane > form > div > span, .so-pane > form > div > span > *{
     display: block;
     max-width: 100%;
     width: 100%;
@@ -151,23 +151,29 @@ main{
     top:0;
 }
 .sort-menu:checked ~ .so-pane, .so-pane-open{
-    display: table;
+    display: block;
     box-sizing: content-box;
     position: fixed;
+    text-align: center;
     top: 85px;
     max-height: 100%;
     width: auto;
     height: auto;
-    padding: 4px;
-    text-align: center;
-    border-style: solid;
-    border-width: 2px;
     -webkit-border-bottom-left-radius: 5px;
     -webkit-border-bottom-right-radius: 5px;
     -moz-border-radius-bottomleft: 5px;
     -moz-border-radius-bottomright: 5px;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
+}
+.sort-menu:checked ~ .so-pane > form, .so-pane-open > form{
+    display: table;
+    box-sizing: inherit;
+    padding: 4px;
+    border-style: solid;
+    border-width: 2px;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
 }
 .main-box > div, footer > p{
diff --git a/dark.css b/dark.css
index 7100fe4..d20d7e8 100644
--- a/dark.css
+++ b/dark.css
@@ -16,7 +16,7 @@ a{
 .home-button > div, .sort-button > div, .menu a, .so-pane > form > div > div > *{
 	color: #e0e0e0;
 }
-.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > form > div > div > input, .so-pane > form > div > div > select{
+.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > form > div > span > input, .so-pane > form > div > div > select{
 	background-color: #606061;
 }
 .hmb-line, .hmb-line::before, .hmb-line::after{
diff --git a/index.go.html b/index.go.html
index 66c4448..ff36b7a 100644
--- a/index.go.html
+++ b/index.go.html
@@ -28,7 +28,7 @@
     {{ end }}
     <input class="sort-menu" type="checkbox" id="sort-menu"/>
     <label class="sort-button no-dec" for="sort-menu" title="Order and Sort Options"><div><img src="{{ .Data.SortImageLocation }}" width="64px" alt='&#8595;'></div></label>
-    <div class="so-pane">
+    <div class="so-pane" id="so-pane">
     <form action="?" method="get" id="so-form">
         {{ if .Light }}
         <input id="so-theme" type="hidden" name="light" />
diff --git a/light.css b/light.css
index bb613d8..6c57381 100644
--- a/light.css
+++ b/light.css
@@ -16,7 +16,7 @@ a{
 .home-button > div, .sort-button > div, .menu a, .so-pane > form > div > div > *{
     color: #1f1f1f;
 }
-.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > form > div > div > input, .so-pane > form > div > div > select{
+.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > form > div > span > input, .so-pane > form > div > div > select{
     background-color: #9f9f9e;
 }
 .hmb-line, .hmb-line::before, .hmb-line::after{