Prevent navigation buttons from scrolling

resources/js/panel/orders.vue

@@ -23,6 +23,8 @@
 	days.</p><div></div></div>
 	<section class="history-pane">
 		<h4>Order History</h4>
+
+	<div class="table-scroller">
 	<table>
 		<thead><th>Date</th><th>ID</th><th>Name</th><th>Status</th>
 		<th>Quantity</th></thead>
@@ -40,11 +42,14 @@
 		</tr>
 		</tbody>
 	</table>
+	</div>
+
 	<img @click="moveHistory(false)" class="nav-btn left"
 	src="../../images/arrow-left-circle-fill.svg" alt=""/>
 	<p class="nav-legend">{{historyPage}}/{{Math.ceil(orders.length/10)}}</p>
 	<img @click="moveHistory(true)" class="nav-btn right"
 	src="../../images/arrow-right-circle-fill.svg" alt=""/>
+
 	</section>
 
 	<order-item v-if="selected" @close="close" :selected="selected"

resources/scss/main.scss

@@ -794,7 +794,6 @@ section.recent-pane, section.history-pane{
 	justify-content: space-between;
 	width: 100%;
 	height: fit-content;
-	overflow-x: scroll;
 
 	h4 {
 		width: 100%;
@@ -916,6 +915,11 @@ section.recent-pane, section.history-pane{
 		min-width: 30em;
 	}
 
+	.table-scroller {
+		width: 100%;
+		overflow-x: scroll;
+	}
+
 }
 
 .actions {