Fix signups page on mobile

The last change to this page made the list of shifts unreadable on mobile, this should fix it so that everything works nicely.

uber/templates/shifts_admin/signups.html

@@ -21,9 +21,8 @@
     {% endif %}
   </div>
 {% endif %}
-
 <a href="signups?department_id={{ department_id }}&toggle_filter=signups_hide_filled" class="btn btn-sm 
-        {% if hide_filled %}btn-outline-secondary{% else %}btn-outline-secondary{% endif %}">
+    {% if hide_filled %}btn-outline-secondary{% else %}btn-outline-secondary{% endif %}">
   <i class="fa fa-filter"></i>
   Hide Filled Shifts
 </a>
@@ -45,20 +44,19 @@
   <i class="fa fa-filter"></i>
   Show Non Public
 </a>
+
 {% if attendees %}
-<div id="volunteers" class="card sticky-top float-end">
-  <div class="card-body">
-    <b>Assign someone to any of these positions</b> <br/>
-    <select id="attendee" class="form-select">
-        <option value="">Select a volunteer</option>
-        {% for attendee in attendees %}
-            <option value="{{ attendee.id }}">{{ attendee.full_name }}</option>
-        {% endfor %}
-    </select>
+  <div id="volunteers" class="position-sticky top-0 float-end card card-body">
+      <b>Assign someone to any of these positions</b> <br/>
+      <select id="attendee" class="form-select">
+          <option value="">Select a volunteer</option>
+          {% for attendee in attendees %}
+              <option value="{{ attendee.id }}">{{ attendee.full_name }}</option>
+          {% endfor %}
+      </select>
   </div>
-</div>
+  <div class="clearfix d-xl-none"></div>
 {% endif %}
-<br/><br/>
 
 <script type="text/javascript">
   {% if hide_filled %}
@@ -70,7 +68,7 @@
     replaceQueryParamInUrl('toggle_filter'); // prevent re-toggling filter on refresh
   });
   </script>
-<div id="jobs-container">
+<div id="jobs-container" class="mt-3">
 {% include "shifts_admin/job_renderer.html" %}
 </div>
 {% endif %}