fix: center pagination in mobile view for profile page

epochtalk · Nov 30, 2021 · 330e9cc · 330e9cc
1 parent f053a3d
commit 330e9cc
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/src/components/layout/SimplePage.vue b/src/components/layout/SimplePage.vue
@@ -46,7 +46,6 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.375rem;
   height: 1.375rem;
   margin: 0 .125rem;
   color: $base-font-color;
@@ -58,6 +57,10 @@ export default {
   cursor: pointer;
   outline: 0;
   user-select: none;
+  @include break-mobile-sm {
+    padding: 0 1rem;
+    width: 0;
+  }
 
   &:focus, &:hover, &:focus:hover {
     color: $base-font-color;

diff --git a/src/components/users/UserPosts.vue b/src/components/users/UserPosts.vue
@@ -326,5 +326,9 @@ export default {
 
 .pagination-wrap {
   float: right;
+  @include break-mobile-sm {
+    float: unset;
+    text-align: center;
+  }
 }
 </style>
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
@@ -632,6 +632,9 @@ export default {
     .title { font-weight: 600; }
     .pagination-wrap {
       float: right;
+      @include break-mobile-sm {
+        float: unset;
+      }
       ul.pagination { float: right; margin-bottom: 0px; }
     }
   }