Refactor pagination-control layout (use CSS-grid)

src/styles/sidebar/components/PaginationNavigation.scss

@@ -5,22 +5,29 @@
 
 .PaginationNavigation {
   @include utils.font--large;
-  @include layout.row;
 
-  &__relative {
-    // Set a minimum width for the previous and next button containers so that
-    // there is no jumping around as they appear and disappear.
-    min-width: 5em;
+  // Lay out page navigation buttons horizontally as:
+  // | prevPage  |       numberedPages          | nextPage
+  //
+  // e.g.
+  // | [<- prev] | [2] ... [5] [6] [7] ... [10] | [next ->] |
+  display: grid;
+  grid-template-columns: 8em auto 8em;
+  align-items: center;
+  grid-template-areas: 'prevPage numberedPages nextPage';
+
+  &__prev {
+    grid-area: prevPage;
   }
 
   &__next {
-    // Make sure "next" button is flush right
-    @include layout.row($justify: flex-end);
+    grid-area: nextPage;
+    justify-self: end;
   }
 
   &__pages {
+    grid-area: numberedPages;
     @include layout.row($justify: center, $align: center);
-    flex-grow: 1;
   }
 
   &__button,
@@ -34,17 +41,17 @@
   &__page-button {
     margin: var.$layout-space--xxsmall;
     padding: var.$layout-space--small var.$layout-space;
+
+    &[aria-pressed='true'] {
+      background-color: var.$grey-3;
+    }
   }
 
   &__button-right {
-    // TODO TEMPORARY adjustment until we can adjust the actual icon
+    // FIXME Button SVG margins assume that the icon is on the left
     svg {
       margin-left: var.$layout-space--xxsmall;
     }
     padding-right: var.$layout-space--xxsmall;
   }
-
-  &__page-button[aria-pressed='true'] {
-    background-color: var.$grey-3;
-  }
 }