feat: Implement responsive design enhancements with new utility classes and improved layout for various components

templates/accounts_bulk_create.html

@@ -38,13 +38,13 @@
     <p>Please note users created this way bypass some of the validations so check details such as email addresses are correct</p>
     <div class="mb-2">
         <label for="input-format" class="form-label">Input format</label>
-        <select id="input-format" class="form-select" style="width:300px">
+        <select id="input-format" class="form-select form-control-max-300">
             <option value="spreadsheet">First,Last,Email,Grade,Supervisor,SupervisorEmail (spreadsheet)</option>
             <option value="name-supervisor-email-grade">User \t Educational Supervisor \t Email \t Grade</option>
         </select>
     </div>
 
-    <textarea id="csv" placeholder="Paste users content here" style="width: 300px; height: 100px;"></textarea><br/>
+    <textarea id="csv" class="form-control form-control-max-300" rows="4" placeholder="Paste users content here"></textarea><br/>
     <input type="button" value="Load Data" _="on click createTable()" >
 
 
@@ -159,7 +159,7 @@
                 console.log(user)
                 $("#users-list").append(`<li data-index="${i}">Name: <span class="name">${user.first_name} ${user.last_name}</span><br/>Email: <span class="email">${user.email}</span><br/>Grade: <span class="grade">${user.grade}</span><br/>Supervisor: <span class="supervisor_name">${user.supervisor_name || ''}</span><br/>
                     <form>
-                    Supervisor email: <input class="supervisor-email-input" name="supervisor_email" type="text" value="${user.supervisor_email || ''}" placeholder="supervisor email" style="width: 320px; display: none;" /> <br/>
+                    Supervisor email: <input class="supervisor-email-input form-control form-control-sm form-control-max-320" name="supervisor_email" type="text" value="${user.supervisor_email || ''}" placeholder="supervisor email" style="display: none;" /> <br/>
                     <input type="text" name="first_name" value="${user.first_name}" hidden>
                     <input type="text" name="last_name" value="${user.last_name}" hidden>
                     <input type="text" name="email" value="${user.email}" hidden>

templates/base.html

@@ -79,6 +79,7 @@
         {% endblock %}
         <link rel="stylesheet" href="{% static 'css/anatomy.css' %}">
         <link rel="stylesheet" href="{% static 'css/forms.css' %}">
+        <link rel="stylesheet" href="{% static 'css/responsive-utils.css' %}">
         <style>
 
             :root {