AMBARI-13386. Browser size 1024 clips tooltips

ambari-web/app/styles/application.less

@@ -477,7 +477,7 @@ footer {
 #version-mismatch-title {
   font-size: 18px;
   font-weight: bold;
-  margin: 10px 0px 10px 0px;
+  margin: 10px 0 10px 0;
 }
 
 #main-nav {
@@ -611,9 +611,7 @@ h1 {
 
 .popover {
   z-index: 1050;
-  min-width: 200px;
-  max-width: 350px;
-  width: auto;
+  width: 350px;
   .popover-inner {
     word-wrap: break-word;
   }
@@ -778,7 +776,7 @@ h1 {
       }
     }
     .box-header {
-      padding: 0px 4px 0px 10px;
+      padding: 0 4px 0 10px;
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #e5e5e5));
       background: -ms-linear-gradient(top, #ffffff, #e5e5e5);
       background: -moz-linear-gradient(center top, #ffffff 0%, #e5e5e5 100%);
@@ -903,7 +901,7 @@ h1 {
     #overallProgress {
     }
     .box-header {
-      padding: 0px 4px 0px 10px;
+      padding: 0 4px 0 10px;
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #e5e5e5));
       background: -ms-linear-gradient(top, #ffffff, #e5e5e5);
       background: -moz-linear-gradient(center top, #ffffff 0%, #e5e5e5 100%);
@@ -912,7 +910,7 @@ h1 {
       }
     }
     table {
-      margin-bottom: 0px;
+      margin-bottom: 0;
     }
     #host-filter {
       margin-top: 1px;
@@ -1041,7 +1039,7 @@ h1 {
         margin-top: 10px;
 
         .progress{
-          margin-bottom: 0px;
+          margin-bottom: 0;
         }
       }
 
@@ -1070,7 +1068,7 @@ h1 {
       vertical-align: top;
       padding: 5px;
       ul {
-        margin: 0px;
+        margin: 0;
       }
       li {
         list-style-type: none;
@@ -1155,10 +1153,10 @@ h1 {
       }
     }
     .entry-row.indent-1 {
-      margin: 10px 0px 10px 2em !important;
+      margin: 10px 0 10px 2em !important;
     }
     .entry-row.indent-2 {
-      margin: 10px 0px 10px 4em !important;
+      margin: 10px 0 10px 4em !important;
     }
     .entry-row {
       margin: 10px 0;
@@ -1183,7 +1181,7 @@ h1 {
         margin-right: 5px !important;
       }
       .control-group {
-        margin: 0px;
+        margin: 0;
         .overrideField {
           display: block;
           margin-top: 5px;
@@ -1468,7 +1466,7 @@ a:focus {
   }
   .box-footer {
     hr {
-      margin: 0px;
+      margin: 0;
     }
   }
 }
@@ -1477,9 +1475,9 @@ a:focus {
 
 /*****start styles for well *****/
 .well {
-  border-radius: 0px;
-  -webkit-border-radius: 0px;
-  -moz-border-radius: 0px;
+  border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
@@ -1489,28 +1487,28 @@ a:focus {
 
 /*****start styles for table*****/
 .table-bordered {
-  border-radius: 0px;
-  -webkit-border-radius: 0px;
-  -moz-border-radius: 0px;
+  border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
   thead:first-child tr:first-child th:first-child,
   tbody:first-child tr:first-child td:first-child,
   thead:first-child tr:first-child th:last-child,
   tbody:first-child tr:first-child td:last-child {
-    -webkit-border-top-left-radius: 0px;
-    border-top-left-radius: 0px;
-    -moz-border-radius-topleft: 0px;
-    -webkit-border-top-right-radius: 0px;
-    border-top-right-radius: 0px;
-    -moz-border-radius-topright: 0px;
+    -webkit-border-top-left-radius: 0;
+    border-top-left-radius: 0;
+    -moz-border-radius-topleft: 0;
+    -webkit-border-top-right-radius: 0;
+    border-top-right-radius: 0;
+    -moz-border-radius-topright: 0;
   }
 }
 /*****end styles for table*****/
 
 /**********start styles for thumbnail ****************/
 .thumbnail {
-  border-radius: 0px;
-  -webkit-border-radius: 0px;
-  -moz-border-radius: 0px;
+  border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
@@ -1525,9 +1523,9 @@ a:focus {
 .nav-pills > li > a,
 .nav-tabs > li > a,
 .accordion-group {
-  border-radius: 0px;
-  -webkit-border-radius: 0px;
-  -moz-border-radius: 0px;
+  border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
 }
 .dropdown-submenu.submenu-left {
   &> .dropdown-menu-wrap {
@@ -1536,7 +1534,7 @@ a:focus {
     left: -100%;
     &> .dropdown-menu {
       position: absolute;
-      top: 0px;
+      top: 0;
       right: -10px;
       margin-top: -32px;
     }
@@ -1578,7 +1576,7 @@ a:focus {
       cursor: pointer;
       border-top: 1px solid #CCC;
       text-align: center;
-      padding: 10px 10px 10px 0px;
+      padding: 10px 10px 10px 0;
       font-size: 16px;
     }
   }
@@ -1615,7 +1613,7 @@ a:focus {
       min-height: 20px;
       .progress-bar{
         .progress{
-          margin-bottom: 0px;
+          margin-bottom: 0;
         }
       }
       .show-details {
@@ -1641,7 +1639,7 @@ a:focus {
         float: left;
       }
       .time-summary {
-        padding-left: 0px;
+        padding-left: 0;
         color: #808080;
         font-size: 12px;
       }
@@ -1790,7 +1788,7 @@ a:focus {
         float: left;
       }
       .time-summary {
-        padding-left: 0px;
+        padding-left: 0;
         color: #808080;
         font-size: 12px;
       }
@@ -1840,7 +1838,7 @@ a:focus {
       content: "";
       margin-top: -4px;
       box-shadow: none;
-      margin-bottom: 0px;
+      margin-bottom: 0;
       font-size: 24px;
     }
 
@@ -1969,7 +1967,7 @@ a:focus {
       }
       .chart-container {
         .chart-x-axis {
-          left: 0%;
+          left: 0;
           width: 100%;
           text-align: left;
         }
@@ -1990,10 +1988,9 @@ a:focus {
 
 .services, .summary-info {
   .tab-marker-position {
-    background-position:  0px 3px;
+    background-position:  0 3px;
     background-repeat: no-repeat;
     list-style: none;
-    float: left;
     height: 20px;
     width: 20px;
     margin-left: 0;
@@ -2124,7 +2121,7 @@ a:focus {
   margin-right: 10px;
 }
 .alerts {
-  margin: 0px;
+  margin: 0;
   overflow-y: auto;
   li {
     border-bottom: 1px solid #eee;
@@ -2147,7 +2144,7 @@ a:focus {
       font-size: 13px;
     }
     .row-fluid [class*="span"] {
-      min-height: 0px;
+      min-height: 0;
     }
     .status-icon {
       padding-top: 7px;
@@ -2194,7 +2191,7 @@ a:focus {
 
 /*Alerts popup*/
 .alertsPopupLinks {
-  padding: 20px 40px 0px;
+  padding: 20px 40px 0;
   text-align: right;
 
   a:first-child {
@@ -2238,7 +2235,7 @@ a:focus {
     }
   }
   position: relative;
-  margin: 20px 15px 0px 15px;
+  margin: 20px 15px 0 15px;
 
   .chart {
     position: relative;
@@ -2247,7 +2244,7 @@ a:focus {
   .chart-y-axis {
     position: absolute;
     top: 0;
-    bottom: 0px;
+    bottom: 0;
     width: 100px;
     z-index: 2;
     margin-top: 15px;
@@ -2552,7 +2549,7 @@ a:focus {
   }
   .chart-container {
     .chart-x-axis {
-      left: 0%;
+      left: 0;
       width: 100%;
     }
   }
@@ -2613,7 +2610,7 @@ table.graphs {
         padding: 3px 0 3px 5px;
         line-height: 20px;
         ul{
-          margin-left: 0px;
+          margin-left: 0;
         }
         label.checkbox {
           padding-left: 3px;
@@ -2638,8 +2635,8 @@ table.graphs {
   }
   h4{
     line-height: 30px;
-    margin-bottom: 0px;
-    margin-top: 0px;
+    margin-bottom: 0;
+    margin-top: 0;
   }
   #dashboard-widgets{
     .caption {
@@ -2657,18 +2654,18 @@ table.graphs {
       *width: 39.55%;
     }
     .thumbnails  > div {
-      margin-left: 0px;
+      margin-left: 0;
       margin-right: 3px;
-      margin-top: 0px;
+      margin-top: 0;
       margin-bottom: 7px;
       height: 163px;
     }
     .thumbnails  li {
       height:150px;
-      margin-left: 0px;
+      margin-left: 0;
       margin-right: 3px;
       margin-top: 3px;
-      margin-bottom: 0px;
+      margin-bottom: 0;
     }
 
     .thumbnail .corner-icon{
@@ -2676,7 +2673,7 @@ table.graphs {
       position: relative;
       .icon-remove-sign{
         color: #000000;
-        text-shadow: #fff 0px 0px 15px;
+        text-shadow: #fff 0 0 15px;
         position: relative;
         left: -13px;
         top: -10px;
@@ -2721,10 +2718,10 @@ table.graphs {
       }
     }
     .thumbnail .caption {
-      padding-left: 0px;
+      padding-left: 0;
       padding-top: 7px;
       padding-bottom: 7px;
-      padding-right: 0px;
+      padding-right: 0;
       color: #555555;
       font-weight:bold;
       font-size: 12px;
@@ -2834,7 +2831,7 @@ table.graphs {
     .cluster-metrics {
       position: relative;
       .chart-container{
-        margin: 0px 10px 0px 10px;
+        margin: 0 10px 0 10px;
         .chart-y-axis{
           margin-top: 10px;
         }
@@ -2858,7 +2855,7 @@ table.graphs {
         margin:0;
       }
       .alert {
-        padding: 0px;
+        padding: 0;
         font-size: 12px;
       }
       .thumbnail:hover {
@@ -2896,7 +2893,6 @@ table.graphs {
 
       .widget-content{
         text-align: center;
-        font-weight: none;
         font-size: 11px;
         color: #555555;
         padding-top: 40px;
@@ -2934,7 +2930,7 @@ table.graphs {
       font-size: 10px;
       >ul{
         margin-top:5px;
-        margin-bottom: 0px;
+        margin-bottom: 0;
       }
       #map-reduce-slots-bar1{
         margin-left: 10px;
@@ -3033,7 +3029,7 @@ table.graphs {
 
     .filter-row {
       th {
-        padding: 0px;
+        padding: 0;
         padding-left: 4px;
       }
     }
@@ -3094,7 +3090,7 @@ table.graphs {
   }
   .host-name-search {
     position: relative;
-    top: 0px;
+    top: 0;
     left: 10px;
   }
   .host-name-pos {
@@ -3465,7 +3461,7 @@ table.graphs {
     .host-title {
       font-size: 18px;
       font-weight: 700;
-      background-position: 0px center;
+      background-position: 0 center;
       padding-left: 17px;
     }
     .host-maintenance-notice {
@@ -3504,7 +3500,6 @@ table.graphs {
 
   .marker {
     background-repeat: no-repeat;
-    display: inline-block;
     height: 13px;
     width: 13px;
     display: inline !important;
@@ -3767,7 +3762,7 @@ table.graphs {
 }
 
 .ha-btn {
-  margin-left: 0px;
+  margin-left: 0;
 }
 
 .rm-ha {
@@ -3989,7 +3984,7 @@ ul.filter {
     .statusName {
       font-size: 15px;
       color: #006F9F;
-      text-shadow: #ffffff 0px 0px 1px;
+      text-shadow: #ffffff 0 0 1px;
       font-weight: bold;
       vertical-align: top;
     }
@@ -4169,10 +4164,10 @@ ul.filter {
     z-index: 1000;
   }
   .container-fluid {
-    padding: 0px;
+    padding: 0;
   }
   .row-fluid [class*="span"] {
-    margin-left: 0px;
+    margin-left: 0;
   }
   .legend {
     margin-top: 20px;
@@ -4457,12 +4452,12 @@ ul.inline li {
       color: #555555;
       text-decoration: none;
       background-color: #e5e5e5;
-      border-radius: 0px;
+      border-radius: 0;
     }
   }
   .filter-row {
     th {
-      padding: 0px;
+      padding: 0;
       padding-left: 8px;
     }
     input {
@@ -4856,7 +4851,7 @@ li.break {
 
 #reload_popup {
   .spinner {
-    padding: 8px 35px 0px 42px;
+    padding: 8px 35px 0 42px;
     width: auto;
     background: url(/img/spinner.gif) no-repeat;
   }
@@ -5446,7 +5441,7 @@ i.icon-asterisks {
     }
     .chart-container {
       .chart-x-axis {
-        left: 0%;
+        left: 0;
         width: 100%;
       }
     }
@@ -5530,10 +5525,10 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
     height: 250px;
   }
   .btn-toolbar {
-    margin-top: 0px;
+    margin-top: 0;
   }
   .manage-configuration-group-content {
-    margin-bottom: 0px;
+    margin-bottom: 0;
     .group-description {
       height:40px;
       overflow-y: auto;
@@ -5905,7 +5900,7 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
           vertical-align: top;
           background-color: #FFFFFF;
           h4 {
-            margin: 0px;
+            margin: 0;
             font-size: 22px;
             font-weight: 400;
           }
@@ -5930,14 +5925,14 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
               }
             }
             .config-subsection {
-              padding: 0px;
+              padding: 0;
               vertical-align: top;
-              height: 0px; // td with height set allows inner div to have % height AMBARI-10985
+              height: 0; // td with height set allows inner div to have % height AMBARI-10985
               .vertical-splitter-l {
                 border-left: 1px solid #e4e4e4; // vertical splitter
                 margin-left: -2px;
                 padding-left: 20px;
-                padding-right: 0px;
+                padding-right: 0;
                 height: 88%;
               }
               &.no-horizontal-splitter {
@@ -5949,7 +5944,7 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
                 padding-bottom: 15px;
               }
               .directories {
-                min-width: 0px !important;
+                min-width: 0 !important;
               }
               .subsection-display-name {
                 padding-top: 5px;