Tweaked localization list style

*Tweaked localization list style

src/components/App.css

@@ -39,12 +39,26 @@ select {
     cursor: pointer;
 }
 
+input[type="file"].non-transparent::file-selector-button,
+input[type="text"].non-transparent,
+button.non-transparent,
+select.non-transparent {
+    background: #222;
+    border: 2px solid #444;
+}
+
 input[type="file"]::file-selector-button:hover,
 button:hover,
 select:hover {
     background: #fff3;
 }
 
+input[type="file"].non-transparent::file-selector-button:hover,
+button.non-transparent:hover,
+select.non-transparent:hover {
+    background: #444;
+}
+
 input[type="file"]::file-selector-button,
 button {
     padding-inline: 10px;
@@ -65,6 +79,20 @@ input[type="text"]:focus {
     border: 2px solid #fff3;
 }
 
+.invis-button {
+    display: block;
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    padding-block: 0;
+    padding-inline: 0;
+    appearance: none;
+}
+
+.invis-button:hover {
+    background-color: transparent;
+}
+
 ::-webkit-scrollbar-track {
     background-color: #141414;
     border-radius: 5px;
@@ -86,17 +114,3 @@ input[type="text"]:focus {
 ::-webkit-scrollbar:horizontal {
     height: 10px;
 }
-
-.invis-button {
-    display: block;
-    background-color: transparent;
-    border: none;
-    padding: 0;
-    padding-block: 0;
-    padding-inline: 0;
-    appearance: none;
-}
-
-.invis-button:hover {
-    background-color: transparent;
-}

src/components/loclist/ClickableLocation.js

@@ -9,7 +9,7 @@ export default function ClickableLocation(props) {
     };
 
     return (
-        <button className="clickable-location" onClick={handleClick}>
+        <button className="clickable-location non-transparent" onClick={handleClick}>
             <span className="location-name">{name}</span>
         </button>
     );

src/components/loclist/LocList.css

@@ -2,15 +2,14 @@
     position: absolute;
     left: 0;
     bottom: 0;
-    padding: 8px;
+    padding: 0.5em;
     display: flex;
-    border-top-right-radius: 8px;
-    flex-direction: column;
-    gap: 4px;
-    background-color: #222;
+    gap: 0.5em 1em;
+    flex-wrap: wrap;
 }
 
 .loclist-section {
     display: flex;
-    gap: 4px;
+    gap: 0.5em;
+    flex-wrap: wrap;
 }