From 49441554e989c60f5f90102bd4fc37fae6576990 Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Tue, 14 Jun 2022 08:45:57 +0200
Subject: [PATCH] fix: m2-610. fix pagination on mobile wishlist view

---
 .../customer/pages/MyAccount/MyWishlist.vue   | 77 +++++++++++--------
 1 file changed, 45 insertions(+), 32 deletions(-)

diff --git a/packages/theme/modules/customer/pages/MyAccount/MyWishlist.vue b/packages/theme/modules/customer/pages/MyAccount/MyWishlist.vue
index 2c7b5129b..d49f62185 100644
--- a/packages/theme/modules/customer/pages/MyAccount/MyWishlist.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/MyWishlist.vue
@@ -75,40 +75,41 @@
                   "
                 />
               </transition-group>
-              <LazyHydrate on-interaction>
-                <SfPagination
-                  v-if="!loading"
-                  v-show="pagination.totalPages > 1"
-                  class="products__pagination desktop-only"
-                  :current="pagination.currentPage"
-                  :total="pagination.totalPages"
-                  :visible="5"
-                />
-              </LazyHydrate>
-
-              <div
-                v-show="pagination.totalPages > 1"
-                class="products__show-on-page"
-              >
-                <span class="products__show-on-page__label">
-                  {{ $t('Show on page') }}
-                </span>
+              <div class="products__display-opt">
                 <LazyHydrate on-interaction>
-                  <SfSelect
-                    :value="pagination.itemsPerPage.toString()"
-                    class="products__items-per-page"
-                    @input="th.changeItemsPerPage"
-                  >
-                    <SfSelectOption
-                      v-for="option in pagination.pageOptions"
-                      :key="option"
-                      :value="option"
-                      class="products__items-per-page__option"
-                    >
-                      {{ option }}
-                    </SfSelectOption>
-                  </SfSelect>
+                  <SfPagination
+                    v-if="!loading"
+                    v-show="pagination.totalPages > 1"
+                    class="products__pagination"
+                    :current="pagination.currentPage"
+                    :total="pagination.totalPages"
+                    :visible="5"
+                  />
                 </LazyHydrate>
+                <div
+                  v-show="pagination.totalPages > 1"
+                  class="products__show-on-page"
+                >
+                  <span class="products__show-on-page__label">
+                    {{ $t('Show on page') }}
+                  </span>
+                  <LazyHydrate on-interaction>
+                    <SfSelect
+                      :value="pagination.itemsPerPage.toString()"
+                      class="products__items-per-page"
+                      @input="th.changeItemsPerPage"
+                    >
+                      <SfSelectOption
+                        v-for="option in pagination.pageOptions"
+                        :key="option"
+                        :value="option"
+                        class="products__items-per-page__option"
+                      >
+                        {{ option }}
+                      </SfSelectOption>
+                    </SfSelect>
+                  </LazyHydrate>
+                </div>
               </div>
             </div>
           </SfLoader>
@@ -506,6 +507,18 @@ export default defineComponent({
       font-size: var(--font-size--sm);
     }
   }
+
+  &__display-opt {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    @include for-mobile {
+      .sf-pagination {
+        margin-bottom: 10px;
+      }
+    }
+  }
 }
 
 .loading {