embelished device configuration history table

app/app/templates/views/public/device-configuration.html

@@ -45,31 +45,33 @@
 		      <h3 class="mb-0" id="confhistory">Configuration history</h3>
 		    </div>
 		{% if config_list %}
-		<table class="table">
-			<thead>
-				<th> Config ID </th>
-				<th> Arguments </th>
-				<th> Status </th>
-				<th> </th>
-			</thead>
-			<tbody>
-				{% for c in config_list %}
-					<td> {{ c[0] }} </td>
-					<td> {{ c[1] }} </td>
-					<td>
-						<span class="badge badge-dot">
-					{% if c[2] %}
-						<i class="bg-success"></i> Completed
-					{% else %}
-						<i class="bg-warning"></i> Pending
-					{% endif %}
-						</span>
-					</td>
-					<td> <a href="javascript:void(0)" onclick="return remove_configuration('{{ c[3][0:-1] }}')"> <span class="fa fa-remove"> </span> </a> </td>
-				</tr>
-				{% endfor %}
-			</tbody>
-		</table>
+		<div class="table-responsive">
+			<table class="table align-items-center table-flush">
+				<thead class="thread-light">
+					<th scope="col"> Config ID </th>
+					<th scope="col"> Arguments </th>
+					<th scope="col"> Status </th>
+					<th scope="col"> </th>
+				</thead>
+				<tbody>
+					{% for c in config_list %}
+						<td> {{ c[0] }} </td>
+						<td> {{ c[1] }} </td>
+						<td>
+							<span class="badge badge-dot">
+						{% if c[2] %}
+							<i class="bg-success"></i> Completed
+						{% else %}
+							<i class="bg-warning"></i> Pending
+						{% endif %}
+							</span>
+						</td>
+						<td> <a href="javascript:void(0)" onclick="return remove_configuration('{{ c[3][0:-1] }}')"> <span class="fa fa-remove"> </span> </a> </td>
+					</tr>
+					{% endfor %}
+				</tbody>
+			</table>
+		</div>
 		{% else %}
                 <div class="col-lg-12">
 		        <center><p style="margin-top: 35px;"> No configuration messages. </p></center>