made jobs more mobile friendly

templates/jobs_overview.html

@@ -42,7 +42,7 @@
 			<div class="panel-body">
 				<div class="row">
 					<form>
-						<div class="form-group col-xs-3">
+						<div class="form-group col-xs-12 col-lg-4">
 							<label for="type">Type</label>
 							<input list="job_type" name="type" value="{{ filter.type }}">
 							<datalist id="job_type">
@@ -51,7 +51,7 @@
 								{% endfor %}
 							</datalist>
 						</div>
-						<div class="form-group col-xs-3">
+						<div class="form-group col-xs-12 col-lg-4">
 							<label for="worker">Worker</label>
 							<input list="job_worker" name="worker" value="{{ filter.worker }}">
 							<datalist id="job_worker">
@@ -60,7 +60,7 @@
 								{% endfor %}
 							</datalist>
 						</div>
-						<div class="form-group col-xs-3">
+						<div class="form-group col-xs-12 col-lg-4">
 							<label for="state">State</label>
 							<input list="job_state" name="state" value="{{ filter.state }}">
 							<datalist id="job_state">
@@ -69,8 +69,8 @@
 								{% endfor %}
 							</datalist>
 						</div>
-						<button type="submit" class="btn btn-primary col-xs-1">Filter</button>
-					</form>
+						<div class="col-xs-12">
+							<button type="submit" class="btn btn-primary">Filter</button>
 							<ul class="pagination pull-right">
 								<li class="page-item">
 									<a class="page-link" href="{{url_for('jobs_overview', page=page-1, **(request.args|filterdict(['page','pagesize']))) }}">
@@ -92,8 +92,10 @@
 									</a>
 								</li>
 							</ul>
-
 						</div>
+					</form>
+				</div>
+				<div class="table-responsive">
 					<table class="table">
 						<tr>
 							<th>ID</th>
@@ -142,4 +144,5 @@
 			</div>
 		</div>
 	</div>
+</div>
 {% endblock %}