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

static/css/layouts/header.css

@@ -74,6 +74,14 @@ header {
     align-self: center;
     display: flex;
 }
+.topnav > .container.header-logo {
+    min-width: 15vh;
+    max-width: 15vh;
+}
+.topnav > .container.company-name {
+    min-width: calc(100vw - 30vh);
+    max-width: calc(100vw - 30vh);
+}
 .topnav select {
     padding: 1vh;
     margin: 1vh;
@@ -81,23 +89,21 @@ header {
     border: 2px solid var(--border-colour);
     font-weight: bold;
     text-align: center;
-}
-.topnav select .collapsed {
-    width: 5vw;
-}
-.topnav select .expanded {
     width: 25vw;
 }
-
+.topnav select .is_collapsed {
+    width: 5vw;
+}
 .company-name {
     font-size: min(28px, calc(1vh * 7));
 }
+/*
 @media screen and (max-width: 450px) {
     .company-name {
-        font-size: min(24px, calc(1vh * 7));
+        font-size: 18px; / * min(24px, calc(1vh * 7)); * /
     }
 }
-
+*/
 /* Page Filters */
 #formFilters {
     width: fit-content;
@@ -110,9 +116,9 @@ header {
 }
 
 #formFilters .container {
-    max-width: fit-content;
 }
 #formFilters .container-input {
+    max-width: fit-content;
     padding: 0 0.5vh;
 }
 #formFilters .container-input:has(.dirty) {
@@ -123,12 +129,14 @@ header {
     width: 10vh;
     max-width: 10vh;
 }
+/*
 #formFilters .container-input input {
     height: 1.7vh;
 }
 #formFilters .container-input select {
     height: 2vh;
 }
+*/
 
 #formFilters .container-input.filter.active_only {
     width: 8vh;
@@ -139,17 +147,13 @@ header {
 #formFilters .container-input.filter.active_only svg.active_only {
     height: 2vh;
     fill: var(--colour-text-background);
-    background-color: var(--colour-accent);
-    border: 1px solid var(--colour-accent);
+    background-color: var(--colour-primary);
+    border: 1px solid var(--colour-primary);
     width: 2vh;
     border-radius: 0.5vh;
 }
 #formFilters .container-input.filter.active_only svg.active_only.is_checked {
-    fill: var(--colour-primary);
-    /*
-    background-color: var(--colour-accent);
-    border: 1px solid var(--colour-accent);
-    */
+    fill: var(--colour-accent);
 }
 #formFilters .container-input.filter.is_not_empty {
     width: 12vh;
@@ -165,7 +169,7 @@ header {
     border: 2px solid var(--colour-primary);
 }
 
-#formFilters button.collapsed {
+#formFilters button.is_collapsed {
     display: block;
     opacity: 0;
 }
@@ -178,4 +182,14 @@ form.filter button.save, form.filter button.button-cancel {
 form.filter button.save, form.filter button.button-cancel {
     margin-top: 0;
     margin-bottom: 1px;
+}
+
+
+@media screen and (max-width: 400px) {
+    #formFilters .container-input select {
+        /* height: 3vh; */
+    }
+    .topnav h1 {
+        font-size: 16px;
+    }
 }