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

static/css/main.css

@@ -33,7 +33,8 @@
 }
 
 html {
-    height: 100%;
+    height: 100vh;
+    /* overflow-y: clip; */
 }
 
 body {
@@ -46,7 +47,8 @@ body {
     border: 0;
     background: linear-gradient(to bottom right, var(--colour-page-background-1), var(--colour-page-background-2)); /* var(--c_purple); */
     height: 100vh;
-    max-height: 100%;
+    /* max-height: 100vh;
+    overflow-y: clip; */
 }
 
 * {
@@ -58,13 +60,10 @@ script, link {
 }
 
 #pageBody {
-    height: 69vh !important;
-    padding: 1vh;
-    padding-left: 1vw;
-    padding-right: 1vw;
-    margin: 1vh;
-    margin-left: 0;
-    margin-right: 0;
+    /* height: 69vh !important; */
+    max-height: 79vh;
+    padding: 0 5vw;
+    margin: 0;
     border: 0;
     align-content: center;
     justify-content: flex-start;
@@ -74,7 +73,7 @@ script, link {
     overflow-y: auto;
     overflow-x: hidden;
     position: absolute;
-    width: 98vw;
+    width: 90vw;
     color: var(--colour-text);
 }
 
@@ -95,19 +94,15 @@ script, link {
 }
 #pageBody > .card {
     height: fit-content;
-    margin: 1vh auto;
-}
-#pageBody > .card:first-of-type{
-    margin-top: 0vh;
-    top: 0;
+    margin: 0.5vh auto;
 }
 
 /* header image */
 img.header-logo {
     max-height: 15vh;
-    max-width: 20vw;
+    max-width: 15vh;
     cursor: pointer;
-    border-radius: 5vh !important;
+    border-radius: 3vh;
 }
 
 /* icon images */
@@ -120,19 +115,17 @@ img.header-logo {
 /* Add a card effect for articles */
 .card {
     background-color: var(--colour-text-background);
-    padding: 1vh;
+    padding: 1vh 2.5vw;
     margin: 1vh;
     display: flex !important;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     text-align: center;
-    border-radius: 4vh;
+    border-radius: 1.5vh;
     position: relative;
     height: fit-content;
     max-width: 80vw;
-    padding-left: 2.5vw;
-    padding-right: 2.5vw;
 }
 
 .header.card {
@@ -162,7 +155,7 @@ img.header-logo {
     display: flex; 
     flex-direction: row;
     width: 100%;
-    /* min-width: fit-content; */
+    flex-wrap: wrap;
 }
 
 .container > .card:first-of-type {
@@ -233,4 +226,17 @@ input.dirty, textarea.dirty, select.dirty {
 
 #pageBody > *, button {
     font-size: min(12px, calc(1vh * 3));
+}
+
+
+
+@media screen and (max-width: 400px) {
+    img.header-logo {
+        border-radius: 3vh;
+    }
+    /*
+    .company-name {
+        font-size: 14px;
+    }
+        */
 }