Allow additional plans.

frontend/src/app/features/settings/pages/plans/plans-page.component.html

@@ -1,6 +1,6 @@
 <sqx-title message="i18n:common.subscription"></sqx-title>
 
-<sqx-layout layout="main" titleText="i18n:common.subscription" titleIcon="subscription" [innerWidth]="60">
+<sqx-layout layout="main" titleText="i18n:common.subscription" titleIcon="subscription" [innerWidth]="63">
     <ng-container menu>
         <sqx-notifo topic="apps/{{plansState.appId}}/settings/plan"></sqx-notifo>
 
@@ -10,7 +10,7 @@
     </ng-container>
 
     <ng-container>
-        <sqx-list-view innerWidth="60rem" [isLoading]="plansState.isLoading | async">
+        <sqx-list-view innerWidth="63rem" [isLoading]="plansState.isLoading | async">
             <ng-container *ngIf="(plansState.isLoaded | async) && (plansState.plans | async); let plans">
                 <div class="alert alert-danger" *ngIf="(plansState.locked | async) === 'NotOwner'">
                     {{ 'plans.notPlanOwner' | sqxTranslate }} {{ 'plans.planOwner' | sqxTranslate }}: <strong className="no-wrap">{{plansState.planOwner | async | sqxUserName}}</strong>
@@ -35,8 +35,8 @@
                         {{ 'plans.noPlanConfigured' | sqxTranslate }}
                     </div>
 
-                    <div class="row gx-2">
-                        <div class="col-3" *ngFor="let planInfo of plans; trackBy: trackByPlan">
+                    <div class="plans">
+                        <div class="plan" *ngFor="let planInfo of plans; trackBy: trackByPlan">
                             <sqx-plan [planInfo]="planInfo"></sqx-plan>
                         </div>
                     </div>

frontend/src/app/features/settings/pages/plans/plans-page.component.scss

@@ -6,6 +6,22 @@
     margin-top: 6.25rem;
 }
 
+.plans {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    margin-left: -4px;
+    margin-right: -4px;
+    padding-bottom: 1rem;
+    overflow-x: auto;
+}
+
+.plan {
+    @include force-width(25%);
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
 .billing-portal-link {
     padding: 2rem .5rem 0;
 }

frontend/src/app/features/teams/pages/plans/plans-page.component.html

@@ -31,8 +31,8 @@
                         {{ 'plans.noPlanConfigured' | sqxTranslate }}
                     </div>
 
-                    <div class="row gx-2">
-                        <div class="col-3" *ngFor="let planInfo of plans; trackBy: trackByPlan">
+                    <div class="plans">
+                        <div class="plan" *ngFor="let planInfo of plans; trackBy: trackByPlan">
                             <sqx-plan [planInfo]="planInfo"></sqx-plan>
                         </div>
                     </div>

frontend/src/app/features/teams/pages/plans/plans-page.component.scss

@@ -6,6 +6,22 @@
     margin-top: 6.25rem;
 }
 
+.plans {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    margin-left: -4px;
+    margin-right: -4px;
+    padding-bottom: 1rem;
+    overflow-x: auto;
+}
+
+.plan {
+    @include force-width(25%);
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
 .billing-portal-link {
     padding: 2rem .5rem 0;
 }