pagination: adjust spacing

Some styles included for pagination don't work for the context in which
this component is used. Updates include removing padding, hiding the
options menu at smaller viewports, and removing the box shadow.

Also includes some refactoring that was needed as part of #1034

pages/blueprintEdit/index.css

@@ -1,10 +1,33 @@
 #cmpsr-blueprint-input-filter {
-  min-width: 45%;
+  min-width: 60%;
+}
+
+.pf-c-pagination.pf-m-bottom .pf-c-options-menu {
+  display: none;
+}
+
+.pf-c-pagination.pf-m-bottom {
+  --pf-c-pagination--m-bottom--BoxShadow: none;
+}
+
+/* The base size for smaller viewports in patternfly-cockpit.scss is too small
+/* for this context. Using the size defined for larger viewports instead. */
+.toolbar-pf-results ul {
+  line-height: 40px;
 }
 
 @media screen and (min-width: 768px) {
-  /* this is when the pagination changes to just previous/next buttons, and at this size, 45% is too small for the input */
+  /* this is when the pagination changes from just previous/next buttons to the full control
+  /* at this size and above, 45% is large enough for the input */
   #cmpsr-blueprint-input-filter {
-    min-width: 60%;
+    min-width: 45%;
+  }
+
+  .pf-c-pagination.pf-m-bottom {
+    padding: 0;
+  }
+
+  .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
+    display: block;
   }
 }

pages/blueprintEdit/index.js

@@ -575,7 +575,7 @@ class EditBlueprintPage extends React.Component {
                   onKeyPress={(e) => this.getFilteredInputs(e)}
                 />
                 <Pagination
-                  className="pf-m-flex-1 pf-u-flex-nowrap-on-lg pf-u-ml-md"
+                  className="pf-m-flex-1 pf-u-flex-nowrap-on-lg pf-u-ml-md-on-md"
                   itemCount={inputs.totalInputs}
                   perPage={this.state.pageSize}
                   page={this.state.page}

public/custom.css

@@ -83,7 +83,10 @@
 .cmpsr-panel__body  .toolbar-pf .toolbar-pf-actions {
   padding-top: 10px;
 }
-.cmpsr-panel__body--sidebar .pf-c-pagination {
+.cmpsr-panel__body--sidebar .toolbar-pf .toolbar-pf-actions {
+  margin-bottom: 0;
+}
+.cmpsr-panel__body--sidebar .toolbar-pf .toolbar-pf-actions > *:last-child {
   margin-bottom: 10px;
 }
 .toolbar-pf-results {
@@ -257,48 +260,6 @@ h1.cmpsr-title__item {
     flex-basis: calc(50% - 20px);
   }
 }
-/* pagination */
-.toolbar-pf-results .content-view-pf-pagination {
-  margin-bottom: 5px;
-  margin-top: 5px;
-  background-color: transparent;
-  border: none;
-  -webkit-box-pack: end;
-          justify-content: flex-end;
-  -webkit-box-align: baseline;
-          align-items: baseline;
-}
-.toolbar-pf-results .pagination {
-  align-self: center;
-}
-.toolbar-pf-results .pagination-pf-page,
-.toolbar-pf-results .pagination.pagination-pf-forward {
-  margin-left: 5px;
-}
-.toolbar-pf-results .pagination-pf-page {
-  display: inline;
-}
-.pagination-cmpsr-pages {
-  display: -webkit-box;
-  display: flex;
-}
-/* given complexity of this component related to sr a11y and i18n, 
-this applies sr-only styles to the child span, which includes 
-the translated screenreader text, while the next line provides 
-the "-" that would display instead of the sr-only "to" */
-.pagination-cmpsr-to > span {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0,0,0,0);
-  border: 0;
-}
-.pagination-cmpsr-to:before {
-  content: "\2013";
-}
 
 /* sidebar */
 .cmpsr-panel__body--sidebar .toolbar-pf-actions .toolbar-pf-filter {