UI: Settings cards layout improvement.

@@ -13,6 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import './settings-card.scss';
+
 /*@ngInject*/
 export default function AdminController(adminService, toast, $scope, $rootScope, $state, $translate) {
 

@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div layout="row" width="100%" layout-wrap> 
-	<md-card flex-gt-sm="60" flex="100" style="height: 100%;">
+<div>
+	<md-card class="settings-card">
        <md-card-title>
           <md-card-title-text>
            		<span translate class="md-headline">admin.general-settings</span>

@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div layout="row" width="100%" layout-wrap tb-help="'outgoingMailSettings'" help-container-id="help-container">
-	<md-card flex-gt-sm="60" flex="100" style="height: 100%;">
+<div tb-help="'outgoingMailSettings'" help-container-id="help-container">
+	<md-card class="settings-card">
        <md-card-title>
           <md-card-title-text layout="row">
            	  <span translate class="md-headline">admin.outgoing-mail-settings</span>

+/**
+ * Copyright © 2016-2019 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "../../scss/constants";
+
+md-card.settings-card {
+  @media (min-width: $layout-breakpoint-sm) {
+    width: 60%;
+  }
+}