Rate limits styles updated

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html

@@ -26,13 +26,7 @@
     </button>
   </mat-toolbar>
   <div mat-dialog-content>
-    <fieldset>
+    <tb-rate-limits-list formControlName="rateLimits"></tb-rate-limits-list>
-      <div fxFlex fxLayout="column">
-        <tb-rate-limits-list
-          formControlName="rateLimits">
-        </tb-rate-limits-list>
-      </div>
-    </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
     <button mat-button color="primary"

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="rateLimitsListFormGroup">
+<section class="tb-rate-limits-form" [formGroup]="rateLimitsListFormGroup">
   <div fxFlex [formGroup]="rateLimit" *ngFor="let rateLimit of rateLimitsFormArray.controls; let $index = index">
     <div class="tb-rate-limits-operation" *ngIf="$index > 0 && rateLimitsFormArray.controls.length > 1" translate>
       tenant-profile.rate-limits.but-less-than

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.scss

@@ -13,9 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import "../../../../../../../scss/constants";
+
 :host {
-  @media screen and (min-width: 800px) {
+  .tb-rate-limits-form {
-    min-width: 600px;
+    @media #{$mat-gt-sm} {
+      min-width: 600px;
+    }
   }
 
   .tb-rate-limits-preview {
@@ -29,11 +33,13 @@
       padding: 1em;
     }
   }
+
   .tb-rate-limits-operation {
     font-size: 12px;
     color: rgba(0,0,0,.54);
     margin-bottom: 16px;
   }
+
   .tb-rate-limits-button {
     margin-top: 0.5em;
   }