Fix layout on edit/create cluster when Event Rate plugin is selected (#…

…4925) Signed-off-by: khizerrehan <[email protected]> Signed-off-by: khizerrehan <[email protected]>
kubermatic · Sep 2, 2022 · 2874d2a · 2874d2a
1 parent dec75f1
commit 2874d2a
Showing 1 changed file with 44 additions and 33 deletions.
diff --git a/src/app/shared/components/event-rate-limit/template.html b/src/app/shared/components/event-rate-limit/template.html
@@ -23,39 +23,50 @@
   </mat-card-header>
   <form fxLayout="row"
         fxLayoutGap="8px"
+        fxLayout.sm="column"
+        fxLayout.xs="column"
         [formGroup]="form">
-    <mat-form-field class="km-dropdown-with-suffix">
-      <mat-label>Limit Type</mat-label>
-      <mat-select [formControlName]="Controls.LimitType"
-                  title="Namespace is the only supported limit type"
-                  class="km-select-ellipsis"
-                  disableOptionCentering>
-        <mat-option value="Namespace">Namespace</mat-option>
-      </mat-select>
-    </mat-form-field>
-    <km-number-stepper [formControlName]="Controls.QPS"
-                       id="km-event-rate-limit-qps-input"
-                       mode="errors"
-                       label="QPS"
-                       min="1"
-                       step="10"
-                       required>
-    </km-number-stepper>
-    <km-number-stepper [formControlName]="Controls.Burst"
-                       id="km-event-rate-limit-burst-input"
-                       mode="errors"
-                       label="Burst"
-                       min="1"
-                       step="10"
-                       required>
-    </km-number-stepper>
-    <km-number-stepper [formControlName]="Controls.CacheSize"
-                       id="km-event-rate-limit-cache-size-input"
-                       mode="errors"
-                       label="Cache Size"
-                       step="10"
-                       min="1"
-                       required>
-    </km-number-stepper>
+
+    <div fxFlex
+         fxLayout="column">
+      <mat-form-field class="km-dropdown-with-suffix">
+        <mat-label>Limit Type</mat-label>
+        <mat-select [formControlName]="Controls.LimitType"
+                    title="Namespace is the only supported limit type"
+                    class="km-select-ellipsis"
+                    disableOptionCentering>
+          <mat-option value="Namespace">Namespace</mat-option>
+        </mat-select>
+      </mat-form-field>
+      <km-number-stepper [formControlName]="Controls.QPS"
+                         id="km-event-rate-limit-qps-input"
+                         mode="errors"
+                         label="QPS"
+                         min="1"
+                         step="10"
+                         required>
+      </km-number-stepper>
+    </div>
+
+    <div fxFlex
+         fxLayout="column">
+      <km-number-stepper [formControlName]="Controls.Burst"
+                         id="km-event-rate-limit-burst-input"
+                         mode="errors"
+                         label="Burst"
+                         min="1"
+                         step="10"
+                         required>
+      </km-number-stepper>
+      <km-number-stepper [formControlName]="Controls.CacheSize"
+                         id="km-event-rate-limit-cache-size-input"
+                         mode="errors"
+                         label="Cache Size"
+                         step="10"
+                         min="1"
+                         required>
+      </km-number-stepper>
+    </div>
+
   </form>
 </div>