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

static/css/layouts/footer.css

@@ -1,24 +1,33 @@
 
 /* Footer */
 .footer {
-    padding: 1vh;
-    padding-left: 1vw;
-    padding-right: 1vw;
+    padding: 1vh 1vw;
     text-align: center;
     margin: 0;
-    height: 8vh !important;
+    max-height: 5vh;
     overflow-y: auto;
     background-color: var(--colour-accent);
-    /*
-    border-top-left-radius: 2.5vh;
-    border-top-right-radius: 2.5vh;
-    */
     position: absolute;
-    /* top: 2.5vh; */
     bottom: 0;
     width: 98vw;
 }
 
+@media screen and (max-width: 400px) {
+    .footer  {
+        max-height: 8vh;
+        padding: 0 2vw;
+        font-size: 10px;    
+        width: 96vw;
+        max-width: 96vw;
+    }
+    .footer > h4 {
+        font-size: 10px;
+    }
+    .footer > h5 {
+        font-size: 9px;
+    }
+}
+
 .footer > h4, h5 {
     padding: 0;
     margin: 0;

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;
+    }
 }

static/css/layouts/table-main.css

@@ -1,8 +1,13 @@
 
+#formFilters {
+    padding: 0.5vh 1vw;
+    margin-top: 1vh;
+}
+
 #tableMain {
     overflow-x: auto;
-    padding: 1vh;
-    max-width: 95vw; /* min(calc(1vh * 80), calc(1vw * 90)); */
+    padding: 1vh 1vw;
+    max-width: 88vw; /* min(calc(1vh * 80), calc(1vw * 90)); */
     width: min-content;
     align-items: normal;
     justify-content: normal;
@@ -12,13 +17,21 @@
     padding: 0.25vh 0.5vh;
 }
 
-#tableMain tbody{
-    max-height: 53vh;
+#tableMain thead {
+    max-height: 4vh;
+    overflow-y: visible;
+}
+
+#tableMain tbody {
+    max-height: 60vh;
     overflow-y: auto;
     min-width: fit-content;
     max-width: fit-content;
     overflow-x: visible;
 }
+#tableMain tbody.is_collapsed {
+    display: block;
+}
 #tableMain:has(tbody > div) tbody {
 }
 #tableMain tbody > div {
@@ -33,7 +46,7 @@
     align-self: center;
     position: relative;
     display: block;
-    width: 90vh;
+    width: min(calc(90vh), calc(70vw));
 }
 
 #tableMain select, 
@@ -97,4 +110,21 @@
 
 #container-template-elements {
     display: none;
+}
+
+
+@media screen and (max-width: 850px) {
+}
+@media screen and (max-width: 400px) {
+    #formFilters input[type="text"],
+    #formFilters select {
+        width: 15vh;
+        /* height: 3vh; */
+    }
+    #tableMain {
+        max-height: 60vh;
+    }
+    #tableMain tbody {
+        max-height: 53vh;
+    }
 }