"Adjust OrderBookingsTable.vue UI structure: reorganize pagination and filters into a new row for improved layout clarity"

src/views/dashboards/userDashboard/bookings/displays/tables/OrderBookingsTable.vue

@@ -115,7 +115,7 @@ const formatSummaryString = (items) => {
 
 <template>
   <div class="mb-3">
-    <!-- Top row: Reload, Search, Pagination info -->
+    <!-- Top row: Reload, Search -->
     <div class="columns is-vcentered is-multiline">
       <div class="column is-narrow">
         <LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">Reload</LoadButtonWhileAwait>
@@ -129,12 +129,12 @@ const formatSummaryString = (items) => {
           @input="search($event.target.value)"
         />
       </div>
-      <div class="column">
+    </div>
+    <!-- Second row: Amount per page, Filters -->
+    <div class="columns is-vcentered is-multiline mt-2">
+      <div class="column is-narrow">
         <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage" />
       </div>
-    </div>
-    <!-- Second row: Filters -->
-    <div class="columns is-vcentered is-multiline mt-2">
       <div class="column is-narrow">
         <div class="select">
           <select :value="orderIdFilter" @change="onOrderIdFilterChange">