Update mobile UI

public/css/employees.css

@@ -61,6 +61,7 @@ body {
     grid-gap: 2rem;
     grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
     justify-items: center;
+    min-width: 100%;
 }
 .card {
     width: 20rem;
@@ -174,3 +175,24 @@ body {
 #loadOverlay {
     display: none;
 }
+
+
+@media screen and (min-width: 320px) {
+
+    .sidenav {
+        display: none;
+    }
+
+    .main {
+        margin-left: 0;
+    }
+    
+    .grid-container {
+        margin-top: 20%;
+    }
+
+    .input-group {
+        min-width: 90%;
+    }
+
+}

public/css/index.css

@@ -138,3 +138,35 @@ input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
   transition: background-color 9999s ease-in-out 0s;
 }
+
+@media screen and (min-width: 360px) {
+
+    .form-control {
+        margin: 1.1% 4% auto;
+        font-size: 80%;
+    }
+
+    .button-group {
+        gap: 2rem;
+    }
+
+    .btn-sm {
+        width: 28%;
+    }
+
+    #logo-image {
+        
+        width: 71%;
+        position: relative;
+        left: 3%;
+        right: 50%;
+
+    }
+
+    #disclaimer-row {
+        left: 11px;
+        padding: 9px;
+        font-size: 11px;
+    }
+   
+}