1. Fix(CSS): Styles improved across all pages. \n 2. Fix(SQL): User authentication correction for demo account with user role.

static/css/components/overlay.css

@@ -6,8 +6,6 @@
     display: none;
     */
     position: fixed;
-    top: 15vh;
-    right: 0;
     width: 100px;
     /* height: 50%; */ 
     background: var(--colour-page-background);
@@ -16,36 +14,54 @@
     align-self: right;
     z-index: 999;
 }
-.overlay.expanded {
-    display: block;
-}
-.collapsed {
+.is_collapsed {
     display: none;
 }
 
 /* Hamburger menu overlay */
+#buttonHamburger {
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    min-height: 4vh;
+    max-height: 4vh;
+    min-width: 4.5vh;
+    max-width: 4.5vh;
+    z-index: 10;
+}
+#buttonHamburger .icon.hamburger {
+    min-height: 3vh;
+    max-height: 3vh;
+    min-width: 3vh;
+    max-width: 3vh;
+}
+/*
 #buttonHamburger:hover {
     text-decoration: none;
+    cursor: pointer;
 }
+*/
 #overlayHamburger {
+    top: 20vh;
+    right: 0.75vh;
     overflow-x: hidden;
     overflow-y: auto;
-    max-height: 80%;
+    max-height: 60vh;
 }
-.hamburger {
+#overlayHamburger {
     border: 2px solid var(--border-colour);
     border-radius: 4px;
 }
-.hamburger:first-child {
+#overlayHamburger:first-child {
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
 }
-.hamburger:last-child {
+#overlayHamburger:last-child {
     border-bottom-left-radius: 12px;
     border-bottom-right-radius: 12px;
 }
 
-.hamburger > * {
+#overlayHamburger > * {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -54,25 +70,45 @@
     width: 100%;
     /* color: var(--colour-text); */
     font-weight: bold;
-    font-size: 18px;
+    font-size: 15px;
     /* height: 18px; */
 }
-.hamburger > :hover {
+#overlayHamburger > :hover {
     color: var(--colour-page-background);
     background-color: var(--colour-primary);
 }
-.hamburger > * > * {
+#overlayHamburger > * > * {
     width: 100%;
     /*
     margin-top: 4.5px;
     margin-bottom: 4.5px;
     */
 }
-.hamburger > .container {
+#overlayHamburger > .container {
     padding-top: 4.5px;
     padding-bottom: 4.5px;
 }
 
+@media screen and (max-width: 400px) {
+    #buttonHamburger {
+        min-height: 6vh;
+        max-height: 6vh;
+        min-width: 6.5vh;
+        max-width: 6.5vh;
+    }
+    #buttonHamburger .icon.hamburger {
+        min-height: 5vh;
+        max-height: 5vh;
+        min-width: 5vh;
+        max-width: 5vh;
+    }
+    #overlayHamburger {
+        top: 22vh;
+        width: 100px;
+        /* right: 6.5vh; */
+    }
+}
+
 /* Confirm overlay */
 #overlayConfirm {
     position: absolute;
@@ -91,4 +127,6 @@
 }
 #overlayConfirm .row .button.submit {
     margin-left: 0.5vh;
-}
+}
+
+