"Read Other Posts" buttons not responsive

[blakeashleyjr]

The buttons that are generated in the "Read Other Posts" section at the bottom of a post are not properly responsive:

I was able to correct the issue:

I did this by modifying the following code in pagination.scss, but there may be a better way to do it:

  @media($phone) {
    // flex: 1;
    width: 90%;
    }

I also made some other stylistic choices you may consider:

  a {
    display: flex;
    justify-content: center;
    flex: 1;
    padding: 8px 16px;
    text-decoration: none;
    text-overflow: ellipsis;
    // the next line was preventing the text from wrapping and only providing a very short cut of the title on mobile.
    // white-space: nowrap;
    overflow: hidden;
  }

  &__text {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  &.next .button__icon {
    display: flex; // new
    margin-left: 8px;
    align-items: center; // new
  }

  &.previous .button__icon {
    display: flex; // new
    margin-left: 8px;
    align-items: center; // new
  }

Let me know your thoughts, and I would be happy to create a PR if you like some or all of the changes.

[icy-comet]

I noticed the same issue wherein the navigation buttons do not adapt to the mobile width. This is what I did:

diff --git a/assets/css/pagination.scss b/assets/css/pagination.scss
index c65efcb..53d4266 100644
--- a/assets/css/pagination.scss
+++ b/assets/css/pagination.scss
@@ -57,7 +57,7 @@
   appearance: none;

   @media($phone) {
-    flex: 1;
+    flex-basis: 1;
   }

   a {
@@ -67,13 +67,11 @@
     padding: 8px 16px;
     text-decoration: none;
     text-overflow: ellipsis;
-    white-space: nowrap;
     overflow: hidden;
   }

   &__text {
     text-overflow: ellipsis;
-    white-space: nowrap;
     overflow: hidden;
   }

Before Changes:

After Changes:

[blakeashleyjr]

@icy-comet Do you have an opinion on flex-basis vs width? Not an expert on CSS, so wanted to see if you had a reason for using flex-basis instead.

@panr Any thoughts?