[DevTools] UI improvements for responsive design view.

Source/devtools/front_end/responsiveDesignView.css

 /*
  * Copyright 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 .responsive-design {
     overflow: hidden;
     position: relative;
 }
@@ skipping 18 matching lines @@
 .responsive-design-slider-height {
     flex: none;
     justify-content: center;
 }
 
 .responsive-design-slider-thumb {
     border: 1px solid rgb(231, 231, 231);
     background-color: lightgray;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
     background-repeat: no-repeat;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 0 1 100px;
 }
 
 .responsive-design-slider-width .responsive-design-slider-thumb {
-    padding: 44px 5px;
     border-radius: 0 3px 3px 0;
     border-left: none;
 }
 
 .responsive-design-slider-height .responsive-design-slider-thumb {
-    padding: 4px 44px;
     border-radius: 0 0 3px 3px;
     border-top: none;
 }
 
 .responsive-design-thumb-handle {
     content: url(Images/statusbarResizerHorizontal.png);
     pointer-events: none;
 }
 
 .responsive-design-slider-height .responsive-design-thumb-handle  {
@@ skipping 178 matching lines @@
     float: left;
     margin-right: 4px;
     margin-left: 2px;
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
 .responsive-design-warning::before {
     background-image: url(Images/statusbarButtonGlyphs_2x.png);
 }
 } /* media */