Fixes:

- Overlay z-index set to 1000 - always on top
  - Alert bar is now clickable rather than containing a button

src/lib/islands/overlay-island.svelte

@@ -30,5 +30,6 @@ div {
     padding: 10px;
     background-color: var(--overlay-color);
     border-radius: 10px;
+    z-index: 1000;
 }
 </style>

src/lib/ldb/alert-bar.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <div id="block"><!--Prevent content slipping underneath the bar--></div>
-<div id="bar">
+<div id="bar" on:click={alertsToggle} on:keypress={alertsToggle}>
     <img src="/images/navigation/alert.svg" alt="">
     {#if uniqueAlerts.length == 1}
       <p id="bartext">There is one active alert</p>
@@ -30,7 +30,7 @@
     {:else}
       <p id="bartext">There are no active alerts</p>
     {/if}
-    <button id="arrow" class:displayAlerts on:click={alertsToggle}>V</button>
+    <p id="arrow" class:displayAlerts>V</p>
 </div>
 {#if displayAlerts}
     <div id="alerts" in:fly={{ y:-200, duration: 500}} out:fly={{ y: -200, duration: 800 }}>
@@ -77,11 +77,13 @@
         font-family: Arial, Helvetica, sans-serif;
         font-weight: 900;
         position: absolute;
+        margin-top: 0;
         right: 15px;
-        top: 10px;
+        top: 11px;
         border: none;
         background-color: transparent;
         transition-duration: 500ms;
+        transition-delay: 00ms;
     }
     #arrow:focus {
         background-color: transparent;
@@ -108,6 +110,7 @@
     }
     .displayAlerts {
         transition-duration: 500ms;
+        transition-delay: 400ms;
         transform: rotate(180deg);
     }
 </style>