Fixed layout issues in Microsoft Edge

src/app/frontend/_variables.scss

@@ -52,5 +52,7 @@ $layout-breakpoint-lg: 1280px;
 $layout-breakpoint-xs: 600px;
 $whiteframe-shadow-1dp: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
 $baseline-grid: 8px;
+$logo-width: 8 * $baseline-grid;
+$logo-height: 8 * $baseline-grid;
 $table-cell-height: 6 * $baseline-grid;
 $table-cell-height-half: $table-cell-height / 2;

src/app/frontend/chrome/chrome.html

@@ -23,10 +23,10 @@ limitations under the License.
       <h2>
         <span>kubernetes</span>
       </h2>
-      <div flex ui-view="toolbar"></div>
+      <div flex="auto" ui-view="toolbar"></div>
     </div>
   </md-toolbar>
-  <div class="kd-app-content-wrapper" ng-switch="ctrl.showLoadingSpinner">
+  <div class="kd-app-content-wrapper" ng-switch="ctrl.showLoadingSpinner" flex="auto" >
     <div ng-switch-when="true" class="kd-center-fixed">
       <md-progress-circular md-mode="indeterminate" md-diameter="96">
       </md-progress-circular>

src/app/frontend/deploy/createsecret.html

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<md-dialog aria-label="Create a new secret" layout="column">
+<md-dialog aria-label="Create a new secret" layout="column" class="kd-create-secret-dialog">
   <md-dialog-content layout-padding>
     <h4 class="md-title">Create a new image pull secret</h4>
     <div>The new secret will be added to the cluster.</div>

src/app/frontend/deploy/createsecret.scss

@@ -14,6 +14,10 @@
 
 @import '../variables';
 
+.kd-create-secret-dialog {
+  min-width: $layout-breakpoint-xs;
+}
+
 .kd-secret-data {
   overflow-y: scroll;
 }

src/app/frontend/deploy/deploy.html

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<div layout="column" layout-padding layout-align="center center">
-  <md-whiteframe class="kd-deploy-whiteframe md-whiteframe-5dp" flex flex-gt-md>
+<div layout="column" layout-padding layout-align="center center" flex="auto" >
+  <md-whiteframe class="kd-deploy-whiteframe md-whiteframe-5dp" flex="auto">
     <h3 class="md-headline kd-deploy-form-title">Deploy a Containerized App</h3>
 
     <form name="ctrl.deployForm" ng-submit="ctrl.deployBySelection()" novalidate>

src/app/frontend/deploy/deploy.scss

@@ -20,6 +20,7 @@
   // TODO(bryk): Find a better, application wide constant for the min width.
   max-width: 960px;
   min-width: 600px;
+  width: 50%;
 }
 
 .kd-deploy-form-title {

src/app/frontend/deploy/deployfromsettings.html

@@ -117,7 +117,7 @@ limitations under the License.
         <div flex="40">Value</div>
       </div>
       <div ng-repeat="label in ctrl.labels">
-         <kd-deploy-label layout="row" flex label="label" labels="ctrl.labels"></kd-deploy-label>
+         <kd-deploy-label layout="row" flex="auto" label="label" labels="ctrl.labels"></kd-deploy-label>
       </div>
     </div>
 
@@ -167,7 +167,7 @@ limitations under the License.
 
   <kd-help-section>
     <div layout="row">
-      <md-input-container flex>
+      <md-input-container flex="auto" >
         <label>CPU requirement (cores)</label>
         <input ng-model="ctrl.cpuRequirement" type="number" name="cpuRequirement" min="0">
         <ng-messages for="ctrl.form.cpuRequirement.$error" role="alert" multiple>
@@ -176,7 +176,7 @@ limitations under the License.
         </ng-messages>
       </md-input-container>
       <div flex="5"></div>
-      <md-input-container flex>
+      <md-input-container flex="auto" >
         <label>Memory requirement (MiB)</label>
         <input ng-model="ctrl.memoryRequirement" type="number" name="memoryRequirement" min="0">
         <ng-messages for="ctrl.form.memoryRequirement.$error" role="alert" multiple>

src/app/frontend/deploy/deploylabel.html

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<ng-form layout="row" flex name="labelForm">
+<ng-form layout="row" flex="auto" name="labelForm">
   <md-input-container md-no-float class="kd-deploy-input-row" flex="45">
     <input name="key" ng-model="labelCtrl.label.key" ng-change="labelCtrl.check(labelForm)"
            placeholder="{{labelCtrl.label.key}}" ng-disabled="!labelCtrl.label.editable">

src/app/frontend/deploy/environmentvariables.html

@@ -17,7 +17,7 @@ limitations under the License.
 <div class="kd-environment-variables-title md-body-2">Environment variables</div>
 <div ng-repeat="variable in ctrl.variables">
   <ng-form name="variablesForm" layout="row">
-    <md-input-container flex class="kd-deploy-input-row">
+    <md-input-container flex="auto" class="kd-deploy-input-row">
       <label>Name</label>
       <input ng-model="variable.name" name="name" ng-change="ctrl.addVariableIfNeeed()"
           ng-pattern="ctrl.namePattern">
@@ -26,7 +26,7 @@ limitations under the License.
       </ng-messages>
     </md-input-container>
     <div flex="5"></div>
-    <md-input-container flex class="kd-deploy-input-row">
+    <md-input-container flex="auto" class="kd-deploy-input-row">
       <label>Value</label>
       <input ng-model="variable.value" name="value">
     </md-input-container>

src/app/frontend/deploy/portmappings.html

@@ -16,7 +16,7 @@ limitations under the License.
 
 <div ng-repeat="portMapping in ctrl.portMappings">
   <ng-form name="portMappingForm" layout="row">
-    <md-input-container flex class="kd-deploy-input-row">
+    <md-input-container flex="auto" class="kd-deploy-input-row">
       <label>Port</label>
       <input ng-model="portMapping.port" ng-change="ctrl.addProtocolIfNeeed()"
              type="number" min="1" max="65535" name="port">
@@ -27,7 +27,7 @@ limitations under the License.
       </ng-messages>
     </md-input-container>
     <div flex="5"></div>
-    <md-input-container flex class="kd-deploy-input-row">
+    <md-input-container flex="auto" class="kd-deploy-input-row">
       <label>Target port</label>
       <input ng-model="portMapping.targetPort" ng-change="ctrl.addProtocolIfNeeed()"
              type="number" min="1" max="65535" name="targetPort">

src/app/frontend/deploy/upload.html

@@ -16,7 +16,7 @@ limitations under the License.
 
 <kd-help-section>
   <div layout="row" layout-align="space-between start">
-    <div flex>
+    <div flex="auto" >
       <md-input-container class="md-block" md-is-error="ctrl.isFileNameError()">
         <label>YAML or JSON file</label>
         <!--TODO: Browse file on focus doesn't work in Firefox. It is to be investigated.-->

src/app/frontend/error/internalerror.html

@@ -16,8 +16,8 @@ limitations under the License.
 
 <div class="kd-center-fixed">
   <div layout="column"  layout-align="center center">
-    <i flex class="material-icons kd-error-view-icon">error_outline</i>
-    <div flex>
+    <i flex="auto" class="material-icons kd-error-view-icon">error_outline</i>
+    <div flex="auto" >
       <h2 class="md-headline">
         <span ng-if="::ctrl.error.statusText">
           {{ctrl.error.statusText}}

src/app/frontend/logs/logs.html

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<div layout="row" flex layout-fill>
-  <md-content layout-padding flex layout-fill ng-class=ctrl.getStyleClass()>
+<div layout="row" flex="auto" layout-fill>
+  <md-content layout-padding flex="auto" layout-fill ng-class=ctrl.getStyleClass()>
     <div ng-repeat="n in ctrl.logsSet" class="kd-logs-element">
       <pre>{{n}}</pre>
     </div>

src/app/frontend/logs/logstoolbar/logstoolbar.html

@@ -35,7 +35,7 @@ limitations under the License.
       </md-option>
     </md-select>
   </div>
-  <span class="kd-logs-toolbar-text" flex>
+  <span class="kd-logs-toolbar-text" flex="auto" >
     <span ng-if="ctrl.podCreationTime">
       Running since {{ctrl.podCreationTime | date:'short'}}
     </span>
@@ -43,7 +43,7 @@ limitations under the License.
       Not running
     </span>
   </span>
-  <span flex></span>
+  <span flex="auto" ></span>
   <md-button class="kd-icon-button" id="colorText"
              ng-click="ctrl.onTextColorChange()">
     <md-icon md-font-library="material-icons"

src/app/frontend/replicationcontrollerdetail/replicationcontrollerdetail.html

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<md-content layout="row" layout-fill flex>
+<md-content layout="row" layout-fill flex="auto" >
   <div class="kd-replicationcontrollerdetail-sidebar" layout="column" flex="noshrink"
        ng-show="ctrl.isSidebarVisible()">
     <div class="kd-replicationcontrollerdetail-sidebar-header-wrapper kd-replicationcontrollerdetail-sidebar-item"
@@ -33,7 +33,7 @@ limitations under the License.
     <kd-replication-controller-info details="::ctrl.replicationControllerDetail">
     </kd-replication-controller-info>
   </div>
-  <div flex>
+  <div flex="auto" >
   <div class="kd-replicationcontrollerdetail-sidebar-header-wrapper kd-replicationcontrollerdetail-sidebar-item"
        flex="nogrow" ng-show="!ctrl.isSidebarVisible()">
     <div class="kd-replicationcontrollerdetail-sidebar-header" layout-align="start center"
@@ -41,12 +41,12 @@ limitations under the License.
       <md-button class="md-icon-button" ui-sref="replicationcontrollers">
         <md-icon md-font-library="material-icons">arrow_back</md-icon>
       </md-button>
-      <h1 flex class="md-title kd-replicationcontrollerdetail-app-name">
+      <h1 flex="auto" class="md-title kd-replicationcontrollerdetail-app-name">
         {{::ctrl.replicationControllerDetail.name}}
       </h1>
     </div>
   </div>
-  <md-tabs flex="grow" md-border-bottom md-dynamic-height>
+  <md-tabs flex="auto" md-border-bottom md-dynamic-height>
     <md-tab label="Pods">
       <md-content>
         <table class="kd-replicationcontrollerdetail-table kd-responsive-table" cellspacing="0">
@@ -184,7 +184,7 @@ limitations under the License.
       </md-content>
     </md-tab>
     <md-tab label="Events">
-      <md-content flex>
+      <md-content flex="auto" >
         <div class="kd-replicationcontrollerdetail-options" layout="row">
           <md-input-container class="kd-replicationcontrollerdetail-option-picker">
             <label>Type</label>

src/app/frontend/replicationcontrollerdetail/replicationcontrollerinfo.html

@@ -20,8 +20,8 @@ limitations under the License.
     DELETE REPLICATION CONTROLLER
   </md-button>
 </div>
-<div flex layout="column" class="kd-replicationcontrollerinfo-item">
-  <div flex layout="column" class="kd-replicationcontrollerinfo-info">
+<div flex="auto" layout="column" class="kd-replicationcontrollerinfo-item">
+  <div flex="auto" layout="column" class="kd-replicationcontrollerinfo-info">
     <span class="kd-replicationcontrollerinfo-title">
       Replication controller
     </span>
@@ -82,7 +82,7 @@ limitations under the License.
       <kd-middle-ellipsis display-string="{{::image}}"></kd-middle-ellipsis>
     </span>
   </div>
-  <div flex layout="column" class="kd-replicationcontrollerinfo-info">
+  <div flex="auto" layout="column" class="kd-replicationcontrollerinfo-info">
     <div ng-if="::infoCtrl.details.services" layout="column">
       <span class="kd-replicationcontrollerinfo-title">Services</span>
       <div ng-repeat="service in ::infoCtrl.details.services">

src/app/frontend/replicationcontrollerdetail/sortedheader.scss

@@ -12,8 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import '../variables';
+
 .kd-replicationcontroller-detail-table-header-button {
-  background: inherit;
+  background-color: $content-background;
   border: 0;
   color: inherit;
   padding: 0;

src/app/frontend/replicationcontrollerlist/replicationcontrollercard.html

@@ -17,7 +17,7 @@ limitations under the License.
 <md-card class="kd-replicationcontroller-card">
   <md-card-content>
     <div layout="column">
-      <div flex layout="row" layout-align="space-between center"
+      <div flex="auto" layout="row" layout-align="space-between center"
             class="kd-replicationcontroller-card-title-row">
         <span layout="row" flex="85">
           <md-icon class="material-icons md-warn kd-replicationcontroller-card-status-icon"
@@ -73,8 +73,8 @@ limitations under the License.
       <div layout="row" layout-wrap>
         <div ng-if="::ctrl.replicationController.description" flex="100" layout="column"
             class="kd-replicationcontroller-card-section">
-          <span flex class="kd-replicationcontroller-card-section-title">Description</span>
-          <div flex class="kd-replicationcontroller-card-description">{{::ctrl.replicationController.description}}</div>
+          <span flex="auto" class="kd-replicationcontroller-card-section-title">Description</span>
+          <div flex="auto" class="kd-replicationcontroller-card-description">{{::ctrl.replicationController.description}}</div>
         </div>
 
         <div flex="60" layout="column" class="kd-replicationcontroller-card-section">
@@ -97,7 +97,7 @@ limitations under the License.
 
         <div flex="60" layout="column" class="kd-replicationcontroller-card-section">
           <span flex="initial" class="kd-replicationcontroller-card-section-title">Internal endpoint</span>
-          <div flex>
+          <div flex="auto" >
             <div ng-repeat="endpoint in ::ctrl.replicationController.internalEndpoints track by $index">
               <kd-service-endpoint endpoint="::endpoint"></kd-service-endpoint>
             </div>
@@ -109,7 +109,7 @@ limitations under the License.
 
         <div flex="40" layout="column" class="kd-replicationcontroller-card-section">
           <span flex="initial" class="kd-replicationcontroller-card-section-title">External endpoint</span>
-          <div flex>
+          <div flex="auto" >
             <div ng-repeat="endpoint in ::ctrl.replicationController.externalEndpoints track by $index">
               <kd-service-endpoint endpoint="::endpoint"></kd-service-endpoint>
             </div>
@@ -122,7 +122,7 @@ limitations under the License.
       <div layout="column" ng-if="::ctrl.hasWarnings()">
         <md-divider class="kd-replicationcontroller-card-divider"></md-divider>
         <div layout-wrap>
-          <div flex class="kd-replicationcontroller-card-section"
+          <div flex="auto" class="kd-replicationcontroller-card-section"
                ng-repeat="warning in ::ctrl.replicationController.pods.warnings">
             <span class="kd-replicationcontroller-card-error">{{::warning.message}}</span>
           </div>

src/app/frontend/replicationcontrollerlist/replicationcontrollercard.scss

@@ -15,6 +15,7 @@
 @import '../variables';
 
 .kd-replicationcontroller-card {
+  display: block;
   margin: 0;
   width: ($layout-breakpoint-lg - (2 * $baseline-grid) * 4) / 3;
 }

src/app/frontend/replicationcontrollerlist/replicationcontrollerlist.html

@@ -18,6 +18,7 @@ limitations under the License.
 </md-button>
 
 <kd-replication-controller-list-container>
-  <kd-replication-controller-card ng-repeat="replicationController in ::ctrl.replicationControllers" replication-controller="::replicationController">
+  <kd-replication-controller-card ng-repeat="replicationController in ::ctrl.replicationControllers"
+                                  replication-controller="::replicationController">
   </kd-replication-controller-card>
 </kd-replication-controller-list-container>

src/app/frontend/replicationcontrollerlist/replicationcontrollerlistcontainer.js

@@ -24,7 +24,6 @@
 export default function computeContainerHeight(container, mdMedia) {
   /** @type {!Array<number>} */
   let childHeights = Array.prototype.map.call(container.children, (child) => child.offsetHeight);
-
   let columnCount = computeColumnCount(mdMedia);
   return binarySearchOptimalHeight(childHeights, columnCount);
 }

src/app/frontend/replicationcontrollerlist/zerostate/zerostate.html

@@ -18,10 +18,10 @@ limitations under the License.
   <md-content layout layout-align="center" class="kd-content">
     <md-card flex="50" class="kd-zerostate-deploy-card">
       <md-toolbar layout="row" class="md-primary kd-zerostate-card-header"
-                  layout-align="center center" flex>
+                  layout-align="center center" flex="auto" >
         <md-icon md-svg-icon="assets/images/kubernetes-logo.svg"
                  class="kd-zerostate-card-logo"></md-icon>
-        <span class="md-padding" flex>The <b>Kubernetes Dashboard</b> lets you deploy, monitor
+        <span class="md-padding" flex="auto" >The <b>Kubernetes Dashboard</b> lets you deploy, monitor
           and troubleshoot containerized apps and services</span>
       </md-toolbar>
       <md-card-content layout-align="center center">

src/app/frontend/replicationcontrollerlist/zerostate/zerostate.scss

@@ -29,9 +29,10 @@
 }
 
 .kd-zerostate-card-logo {
-  height: 80px;
+  height: $logo-height;
+  min-width: $logo-width;
   padding: 0 0 0 15px;
-  width: 80px;
+  width: $logo-width;
 }
 
 .kd-zerostate-deploy-card {