Fix some styling issues (#16023) (#16043)

* Fix border of vis view

* Fix pagination looks

* Fix functional tests

src/core_plugins/kibana/public/visualize/listing/visualize_listing.html

@@ -14,7 +14,7 @@
   </div>
 </kbn-top-nav>
 
-<div class="kuiViewContent kuiViewContent--constrainedWidth"
+<div class="kuiViewContent kuiViewContent--constrainedWidth kuiViewContentItem"
      data-test-subj="visualizeLandingPage"
 >
   <div class="kuiViewContentItem kuiVerticalRhythm" ng-if="listingController.showLimitError">

src/core_plugins/kibana/public/visualize/wizard/step_1.html

@@ -12,7 +12,7 @@
   </div>
 </kbn-top-nav>
 
-<div class="kuiViewContent kuiViewContent--constrainedWidth" data-test-subj="visualizeSelectTypePage">
+<div class="kuiViewContent kuiViewContent--constrainedWidth kuiViewContentItem" data-test-subj="visualizeSelectTypePage">
   <div class="kuiViewContentItem">
     <!-- Header -->
     <div class="visualizeViewContentHeader kuiVerticalRhythm kuiVerticalRhythm--medium">

src/core_plugins/kibana/public/visualize/wizard/step_2.html

@@ -12,7 +12,7 @@
   </div>
 </kbn-top-nav>
 
-<div class="kuiViewContent kuiViewContent--constrainedWidth" data-test-subj="visualizeSelectSearch">
+<div class="kuiViewContent kuiViewContent--constrainedWidth kuiViewContentItem" data-test-subj="visualizeSelectSearch">
   <div class="wizard kuiViewContentItem">
     <div class="wizard-column wizard-column--small">
       <h2 class="kuiTitle kuiVerticalRhythm">

src/ui/public/partials/paginate_controls.html

@@ -13,14 +13,24 @@
 >
   <ul class="pagination-other-pages-list pagination-sm" ng-if="page.count > 1">
     <li ng-style="{'visibility':'hidden'}" ng-if="page.first">
-      <button class="kuiLink" ng-click="paginate.goToPage(page.prev)">«</button>
+      <button
+        class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton"
+        ng-click="paginate.goToPage(page.prev)"
+      >«</button>
     </li>
     <li ng-style="{'visibility':'visible'}" ng-if="!page.first">
-      <button class="kuiLink" ng-click="paginate.goToPage(page.prev)">«</button>
+      <button
+        class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton"
+        ng-click="paginate.goToPage(page.prev)"
+      >«</button>
     </li>
 
     <li ng-if="!otherPages.containsFirst">
-      <button class="kuiLink" ng-click="paginate.goToPage(1)">1...</button>
+      <button
+        class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton"
+        ng-click="paginate.goToPage(1)"
+      >1</button>
+      ...
     </li>
 
     <li
@@ -28,7 +38,8 @@
       ng-class="{ active: other.number === page.number }"
     >
       <button
-        class="kuiLink"
+        class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton"
+        ng-class="{ 'euiPaginationButton-isActive': other.number === page.number }"
         ng-click="paginate.goToPage(other)"
       >
         {{other.number}}
@@ -36,14 +47,24 @@
     </li>
 
     <li ng-if="!otherPages.containsLast">
-      <button class="kuiLink" ng-click="paginate.goToPage(page.count)">...{{page.count}}</button>
+      ...
+      <button
+        class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton"
+        ng-click="paginate.goToPage(page.count)"
+      >{{page.count}}</button>
     </li>
 
     <li ng-style="{'visibility':'hidden'}" ng-if="page.last">
-      <button class="kuiLink" ng-click="paginate.goToPage(page.next)">»</button>
+      <button
+        class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton"
+        ng-click="paginate.goToPage(page.next)"
+      >»</button>
     </li>
     <li ng-style="{'visibility':'visible'}" ng-if="!page.last">
-      <button class="kuiLink" ng-click="paginate.goToPage(page.next)">»</button>
+      <button
+        class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton"
+        ng-click="paginate.goToPage(page.next)"
+      >»</button>
     </li>
   </ul>
 </div>

test/functional/apps/management/_index_pattern_results_sort.js

@@ -104,7 +104,11 @@ export default function ({ getService, getPageObjects }) {
 
       it('should have the correct number of rows per page', async function () {
         for (let pageNum = 1; pageNum <= LAST_PAGE_NUMBER; pageNum += 1) {
-          await PageObjects.settings.goToPage(pageNum);
+          if (pageNum > 1) {
+            // We are by default on page 1 so don't navigate there
+            await PageObjects.settings.goToPage(pageNum);
+          }
+
           const pageFieldNames = await retry.tryMethod(PageObjects.settings, 'getFieldNames');
 
           if (pageNum === LAST_PAGE_NUMBER) {