Revised some UI elements

static/css/main.css

@@ -58,20 +58,23 @@ main {
     align-items: center;
     flex-grow: 1;
     width: 100%;
-    margin-top: calc(-14rem + 2vh);
+    margin-top: 2rem;
 }
 .userPanel {
-    width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: center;
-    align-items: flex-start;
-    min-width: fit-content;
+    align-items: center;
     margin-top: 1rem;
-    pointer-events: none;
+    font-size: 1rem;
+    width: 90%;
 }
-.userPanel > div {
-    margin: 0 1rem;
+.userInfo span {
+    font-size: 1.1rem;
+}
+.userPanel > .horizontalButtonList {
+    margin-left: auto;
+    margin-right: 0;
 }
 .userBalanceWarn {
     color: var(--color-error);
@@ -118,25 +121,19 @@ main > h1 {
     box-shadow: none;
     text-align: center;
     justify-content: center;
-    pointer-events: all;
 }
 .dropDownButton, .dropDownChoice {
     font-size: 1rem;
 }
-.dropDownButton > div::after {
-    content: '\25BC';
-    display: inline-block;
-    transition: transform 100ms;
-    padding: 0 .3rem;
-}
 .dropDownList {
+    position: absolute;
     display: flex;
     flex-direction: column;
     pointer-events: none;
     border-radius: var(--glass-corner-radius) !important;
     backdrop-filter: var(--glass-blur);
     z-index: 200;
-    margin-top: .5rem;
+    margin-top: 3.2rem;
     opacity: 0%;
     transition: opacity 100ms;
 }
@@ -166,12 +163,6 @@ main > h1 {
     visibility: visible;
     pointer-events: visible;
 }
-.dropDownVisible > .dropDownButton > div::after {
-    transform: rotate(180deg);
-}
-.userPanel .dropDownButton, .userPanel .dropDownChoice {
-    font-size: 1.1rem;
-}
 /* FOOTER */
 .footer {
     z-index: 990;
@@ -215,8 +206,8 @@ tr:nth-child(2n+2) {
 }
 /*
 Rounded corners on table cells apparently don't work with
-Firefox (91), so Firefox users won't have rounded corners
-on tables. Won't fix that by myself.
+Firefox, so Firefox users won't have rounded corners
+on tables. Can't fix that by myself.
 */
 table tr:first-child th:first-child {
     border-top-left-radius: var(--glass-corner-radius);
@@ -285,7 +276,6 @@ form .button, form button {
     align-items: center;
     justify-content: center;
     font-family: var(--font-family);
-    font-size: .9rem;
     text-decoration: none;
     text-align: center !important;
     background: var(--glass-bg);
@@ -341,7 +331,9 @@ input[type="text"], input[type="password"], input[type="number"] {
     flex-direction: row;
     align-items: flex-end;
     justify-content: space-between;
-    width: 100%;
+}
+.horizontalButtonList > .button, .horizontalButtonList > button, .horizontalButtonList > div {
+    margin: 0 .5rem;
 }
 .errorText {
     margin-top: 1rem;
@@ -365,8 +357,9 @@ h1 {
         justify-content: start;
         align-items: center;
     }
-    .userPanel > div {
-        margin: 0;
-        margin-bottom: .5rem;
+    .userPanel > .horizontalButtonList {
+        margin-right: 0;
+        margin-left: 0;
+        margin-top: .5rem;
     }
 }