From 0189c5aaeb4c1baa4ee6f11d8429768d9bf91927 Mon Sep 17 00:00:00 2001
From: Immanuel Onyeka <immanuel@onyeka.ca>
Date: Wed, 23 Jun 2021 10:46:40 -0400
Subject: [PATCH] Prevent navigation buttons from scrolling

---
 resources/js/panel/orders.vue | 5 +++++
 resources/scss/main.scss      | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/resources/js/panel/orders.vue b/resources/js/panel/orders.vue
index 8ec24da..c743c09 100644
--- a/resources/js/panel/orders.vue
+++ b/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"
diff --git a/resources/scss/main.scss b/resources/scss/main.scss
index 54ddd71..a3b5bbd 100644
--- a/resources/scss/main.scss
+++ b/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 {