From 70e218bdbd1ac7dd4ca40eff6e2c61332e180d76 Mon Sep 17 00:00:00 2001
From: "Jocelyn Badgley (Twipped)" <joc@twipped.com>
Date: Tue, 1 Dec 2020 11:42:43 -0800
Subject: [PATCH] Fix pager on mobile

---
 scss/_pager.scss   | 11 +++++++++--
 templates/page.hbs |  8 ++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/scss/_pager.scss b/scss/_pager.scss
index 4aab5b1..f276211 100644
--- a/scss/_pager.scss
+++ b/scss/_pager.scss
@@ -26,17 +26,24 @@
     width: 100%;
     // min-width: 75%;
     display: flex;
+    height: 36px;
+    max-width: calc(50vw - 10px);
+
+    .caption {
+      overflow-x: hidden;
+    }
   }
 
-  .btn.left {
+  .btn.left .caption {
     justify-content: flex-start;
   }
 
-  .btn.right {
+  .btn.right .caption {
     justify-content: flex-end;
   }
 
   span.svg-icon {
     margin-top: 1px;
+    flex: 0 0 20px;
   }
 }
diff --git a/templates/page.hbs b/templates/page.hbs
index 4e0ca08..a0cf926 100644
--- a/templates/page.hbs
+++ b/templates/page.hbs
@@ -28,10 +28,10 @@
 
     {{#if siblings}}
     <div class="pager">
-      <div class="prev">{{#if siblings.prev}}<a href="{{siblings.prev}}" class="btn btn-primary left">{{icon 'angle-left'}} {{#if siblings.prevCaption}}{{siblings.prevCaption}}{{else}}Back{{/if}}</a>{{/if}}</div>
-      <div class="first">{{#if siblings.first}}<a href="{{siblings.first}}" class="btn btn-primary left">{{icon 'angle-double-left'}} {{#if siblings.firstCaption}}{{siblings.firstCaption}}{{else}}Newest{{/if}}</a>{{/if}}</div>
-      <div class="last">{{#if siblings.last}}<a href="{{siblings.last}}" class="btn btn-primary right">{{#if siblings.lastCaption}}{{siblings.lastCaption}}{{else}}Oldest{{/if}} {{icon 'angle-double-right'}}</a>{{/if}}</div>
-      <div class="next">{{#if siblings.next}}<a href="{{siblings.next}}" class="btn btn-primary right">{{#if siblings.nextCaption}}{{siblings.nextCaption}}{{else}}Next{{/if}} {{icon 'angle-right'}}</a>{{/if}}</div>
+      <div class="prev">{{#if siblings.prev}}<a href="{{siblings.prev}}" class="btn btn-primary left">{{icon 'angle-left'}}<span class="caption">{{#if siblings.prevCaption}}{{siblings.prevCaption}}{{else}}Back{{/if}}</a>{{/if}}</span></div>
+      <div class="first">{{#if siblings.first}}<a href="{{siblings.first}}" class="btn btn-primary left">{{icon 'angle-double-left'}}<span class="caption">{{#if siblings.firstCaption}}{{siblings.firstCaption}}{{else}}Newest{{/if}}</a>{{/if}}</span></div>
+      <div class="last">{{#if siblings.last}}<a href="{{siblings.last}}" class="btn btn-primary right"><span class="caption">{{#if siblings.lastCaption}}{{siblings.lastCaption}}{{else}}Oldest{{/if}}</span>{{icon 'angle-double-right'}}</a>{{/if}}</div>
+      <div class="next">{{#if siblings.next}}<a href="{{siblings.next}}" class="btn btn-primary right"><span class="caption">{{#if siblings.nextCaption}}{{siblings.nextCaption}}{{else}}Next{{/if}}</span>{{icon 'angle-right'}}</a>{{/if}}</div>
     </div>
     {{/if}}
   </article>