From dc25baf7bc892c4e47c3ace925a348f5d02a5ae9 Mon Sep 17 00:00:00 2001
From: David Ma <davidma415@gmail.com>
Date: Mon, 2 Oct 2023 12:28:34 -0600
Subject: [PATCH] style: fix pagination bar catalog alignment

---
 src/components/Catalog.vue | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/Catalog.vue b/src/components/Catalog.vue
index b149a2b7..1e9b71bf 100644
--- a/src/components/Catalog.vue
+++ b/src/components/Catalog.vue
@@ -28,7 +28,10 @@
         </div>
       </div>
     </div>
-    <div v-else>
+    <div
+      v-else
+      class="list-wrapper"
+    >
       <CatalogCardList
         v-if="activeView == 'grid'"
         :products="catalogItems"
@@ -39,14 +42,14 @@
         :products="catalogItems"
         :loading="loading"
       />
+      <PaginationBar
+        class="pagination-bar container max-w-screen-2xl mx-auto"
+        :page-size="cardsPerPage"
+        :total-count="totalCount"
+        :search-triggered="searchTriggered"
+        @pageChanged="$emit('list-page-changed', $event)"
+      />
     </div>
-    <PaginationBar
-      class="pagination-bar container mt-4"
-      :page-size="cardsPerPage"
-      :total-count="totalCount"
-      :search-triggered="searchTriggered"
-      @pageChanged="$emit('list-page-changed', $event)"
-    />
   </div>
 </template>
 
@@ -126,6 +129,15 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.list-wrapper {
+  width: 100%;
+}
+
+.pagination-bar {
+  // TODO: Kui variables
+  margin-top: 16px;
+}
+
 .products-content {
   --grey-500: var(--button_colors-primary-fill);
   display: flex;