"Update UI in PaginationDisplay.vue and OrderBookingsTable.vue: adjust label styles, reorganize layout for search and reload controls, and improve filter dropdown with dynamic labels for enhanced clarity and usability"

src/components/displays/pagination/PaginationDisplay.vue

@@ -22,7 +22,7 @@ window.addEventListener('resize', () => {
     <div class="columns is-vcentered is-multiline is-mobile">
       <!-- Change the number of items per page -->
       <div class="column is-narrow my-3" :class="{ 'is-hidden': isSmall }">
-        <label class="label">Antal per side</label>
+        <label class="label is-small">Antal per side</label>
         <div class="control">
           <div class="select">
             <select v-model="selectedPerPage" @change="setMetaItemsPerPage(selectedPerPage); selectedPerPage.valueOf = selectedPerPage">

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

@@ -117,31 +117,36 @@ const formatSummaryString = (items) => {
   <div class="mb-3">
     <!-- Top row: Reload, Search -->
     <div class="columns is-vcentered is-multiline">
+      <div class="column">
+        <input
+            class="input"
+            type="text"
+            placeholder="Søg..."
+            v-model="metaSearch"
+            @input="search($event.target.value)"
+        />
+      </div>
       <div class="column is-narrow">
         <LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">Reload</LoadButtonWhileAwait>
       </div>
-      <div class="column is-4">
-        <input
-          class="input"
-          type="text"
-          placeholder="Søg..."
-          v-model="metaSearch"
-          @input="search($event.target.value)"
-        />
-      </div>
     </div>
     <!-- Second row: Amount per page, Filters -->
-    <div class="columns is-vcentered is-multiline mt-2">
+    <div class="columns is-vcentered is-multiline">
       <div class="column is-narrow">
         <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage" />
       </div>
       <div class="column is-narrow">
-        <div class="select">
-          <select :value="orderIdFilter" @change="onOrderIdFilterChange">
-            <option value="*">Alle</option>
-            <option value="is null">Uden ordre</option>
-            <option value="not null">Med ordre</option>
-          </select>
+        <div class="field mb-0">
+          <label class="label is-small">Tilknyttet {{ SessionUser.objects.orders.meta.labels.single.toLowerCase() }}</label>
+          <div class="control">
+            <div class="select">
+              <select :value="orderIdFilter" @change="onOrderIdFilterChange">
+                <option value="*">Alle</option>
+                <option value="is null">Uden {{ SessionUser.objects.orders.meta.labels.single.toLowerCase() }}</option>
+                <option value="not null">Med {{ SessionUser.objects.orders.meta.labels.single.toLowerCase() }}</option>
+              </select>
+            </div>
+          </div>
         </div>
       </div>
     </div>