optimised alerts popup for narrow screens

frontend/src/styles/popups.scss

@@ -1344,6 +1344,11 @@
     margin-right: -10rem;
     border-radius: var(--roundness) 0 0 var(--roundness);
 
+    .mobileClose {
+      margin: 0 1rem 2rem 1rem;
+      display: none;
+    }
+
     .separator {
       background-color: var(--sub-alt-color);
       height: 0.25rem;

frontend/src/styles/z_media-queries.scss

@@ -894,6 +894,15 @@
   #mobileTestConfig {
     display: block;
   }
+  #alertsPopupWrapper {
+    #alertsPopup {
+      border-radius: 0;
+      width: 100%;
+      .mobileClose {
+        display: block;
+      }
+    }
+  }
 }
 
 @media only screen and (max-width: 400px) {

frontend/src/ts/elements/alerts.ts

@@ -311,6 +311,10 @@ $("#alertsPopupWrapper").on("mousedown", (e) => {
   }
 });
 
+$("#alertsPopup .mobileClose").on("click", () => {
+  hide();
+});
+
 $("#alertsPopup .accountAlerts .list").on(
   "click",
   ".item .buttons .deleteAlert",

frontend/static/html/popups.html

@@ -1,5 +1,9 @@
 <div id="alertsPopupWrapper" class="popupWrapper hidden">
   <div id="alertsPopup">
+    <div class="button mobileClose">
+      <i class="fas fa-times"></i>
+      Close
+    </div>
     <div class="scrollWrapper">
       <div class="accountAlerts">
         <div class="title">

frontend/static/html/top.html

@@ -124,17 +124,6 @@
         </div>
       </div>
     </a>
-    <a
-      class="textButton login view-login"
-      tabindex="2"
-      href="/login"
-      onclick="this.blur();"
-      router-link
-    >
-      <div class="icon">
-        <i class="far fa-fw fa-user"></i>
-      </div>
-    </a>
     <a
       class="textButton showAlerts"
       tabindex="2"