MAGETWO-37594: Implementation and fixes after review

- Added scrollbar appearing compensation
- Modified dialogs action close active state

Author: Bogdan Plieshka

app/design/adminhtml/Magento/backend/web/css/source/_structure.less

@@ -11,6 +11,8 @@
 //  Variables
 //  ---------------------------------------------
 
+@window__min-width: 1024px;
+
 @body__background-color: @color-white-smoke;
 
 @page-wrapper__indent-left: @menu__width;
@@ -29,7 +31,7 @@ body {
 
 .page-wrapper {
     background-color: @page-wrapper__background-color;
-    min-width: 102.4rem;
+    min-width: @window__min-width;
     padding-left: @page-wrapper__indent-left;
 }
 
@@ -47,6 +49,14 @@ body {
     }
 }
 
+//  Scroll bar appearing compensation
+@media (min-width: @window__min-width) {
+    html {
+        width: 100vw;
+        overflow-x: hidden;
+    }
+}
+
 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
     .page-layout-admin-2columns-left {
         .page-columns {

app/design/adminhtml/Magento/backend/web/css/source/components/_dialogs_extend.less

@@ -19,6 +19,7 @@
 
 @dialog-action-close__color: @color-brownie-vanilla;
 @dialog-action-close__font-size: 2rem;
+@dialog-action-close__active__font-size: 1.8rem;
 @dialog-action-close__hover__color: darken(@color-brownie-vanilla, 10%);
 
 //
@@ -32,7 +33,9 @@
         top: 0;
         &:active {
             transform: none;
-            margin-top: 1px;
+            &:before {
+                font-size: @dialog-action-close__active__font-size;
+            }
         }
         &:hover {
             &:before {
@@ -52,6 +55,10 @@
     }
     .action-close {
         padding: @dialog-modal__padding;
+        &:active {
+            padding-top: @dialog-modal__padding + (@dialog-action-close__font-size - @dialog-action-close__active__font-size) / 2;
+            padding-right: @dialog-modal__padding + (@dialog-action-close__font-size - @dialog-action-close__active__font-size) / 2;
+        }
     }
 }
 
@@ -62,6 +69,10 @@
     }
     .action-close {
         padding: @dialog-slide-header__padding-vertical @dialog-slide__padding;
+        &:active {
+            padding-top: @dialog-slide-header__padding-vertical + (@dialog-action-close__font-size - @dialog-action-close__active__font-size) / 2;
+            padding-right: @dialog-slide__padding + (@dialog-action-close__font-size - @dialog-action-close__active__font-size) / 2;
+        }
     }
 }