From d2e86eaa242e411bc693d46c7761d0ed3e75a7a6 Mon Sep 17 00:00:00 2001
From: Robbie Davis <robbie@therobbiedavis.com>
Date: Sat, 22 Oct 2022 10:47:40 -0400
Subject: [PATCH] Fixed column layout on multiple components for the user
 settings (#1602)

#Fixed
- Fixed: Fixed an issue where the controls would extend outside of the container on the user account preferences page.
---
 .../change-age-restriction.component.html      | 18 ++++++++++--------
 .../change-email/change-email.component.html   | 10 ++++++----
 .../change-password.component.html             | 10 ++++++----
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/UI/Web/src/app/user-settings/change-age-restriction/change-age-restriction.component.html b/UI/Web/src/app/user-settings/change-age-restriction/change-age-restriction.component.html
index fd99fba37..1801cdd1a 100644
--- a/UI/Web/src/app/user-settings/change-age-restriction/change-age-restriction.component.html
+++ b/UI/Web/src/app/user-settings/change-age-restriction/change-age-restriction.component.html
@@ -1,20 +1,22 @@
 <div class="card mt-2">
     <div class="card-body">
         <div class="card-title">
-            <div class="row mb-2">
-                <div class="col-11"><h4 id="age-restriction">Age Restriction</h4></div>
-                <div class="col-1">
+            <div class="container-fluid row mb-2">
+                <div class="col-10 col-sm-11"><h4 id="age-restriction">Age Restriction</h4></div>
+                <div class="col-1 text-end">
                     <button class="btn btn-primary btn-sm" (click)="toggleViewMode()" *ngIf="(hasChangeAgeRestrictionAbility | async)">{{isViewMode ? 'Edit' : 'Cancel'}}</button>
                 </div>
             </div>
         </div>
 
         <ng-container *ngIf="isViewMode">
-            <span>{{user?.ageRestriction?.ageRating| ageRating | async}}
-                <ng-container *ngIf="user?.ageRestriction?.ageRating !== AgeRating.NotApplicable && user?.ageRestriction?.includeUnknowns">
-                    <span class="ms-1 me-1">+</span> Unknowns
-                </ng-container>
-            </span>
+            <div class="container-fluid row">
+                <span class="col-12">{{user?.ageRestriction?.ageRating| ageRating | async}}
+                    <ng-container *ngIf="user?.ageRestriction?.ageRating !== AgeRating.NotApplicable && user?.ageRestriction?.includeUnknowns">
+                        <span class="ms-1 me-1">+</span> Unknowns
+                    </ng-container>
+                </span>
+            </div>
         </ng-container>
 
         <div #collapse="ngbCollapse" [(ngbCollapse)]="isViewMode">
diff --git a/UI/Web/src/app/user-settings/change-email/change-email.component.html b/UI/Web/src/app/user-settings/change-email/change-email.component.html
index 5b2f782e0..7632cec00 100644
--- a/UI/Web/src/app/user-settings/change-email/change-email.component.html
+++ b/UI/Web/src/app/user-settings/change-email/change-email.component.html
@@ -1,8 +1,8 @@
 <div class="card mt-2">
     <div class="card-body">
         <div class="card-title">
-            <div class="row mb-2">
-                <div class="col-11">
+            <div class="container-fluid row mb-2">
+                <div class="col-10 col-sm-11">
                     <h4 id="email-card">Email 
                         <ng-container *ngIf="!emailConfirmed">
                             <i class="fa-solid fa-circle ms-1 confirm-icon" aria-hidden="true" ngbTooltip="This email is not confirmed"></i>
@@ -10,14 +10,16 @@
                         </ng-container>
                     </h4>
                 </div>
-                <div class="col-1">
+                <div class="col-1 text-end">
                     <button class="btn btn-primary btn-sm" (click)="toggleViewMode()">{{isViewMode ? 'Edit' : 'Cancel'}}</button>
                 </div>
             </div>
         </div>
         
         <ng-container *ngIf="isViewMode">
-            <span>{{user?.email}}</span>
+            <div class="container-fluid row">
+                <span class="col-12">{{user?.email}}</span>  
+            </div>
         </ng-container>
 
         <div #collapse="ngbCollapse" [(ngbCollapse)]="isViewMode">
diff --git a/UI/Web/src/app/user-settings/change-password/change-password.component.html b/UI/Web/src/app/user-settings/change-password/change-password.component.html
index d3839d090..05268cb8d 100644
--- a/UI/Web/src/app/user-settings/change-password/change-password.component.html
+++ b/UI/Web/src/app/user-settings/change-password/change-password.component.html
@@ -1,16 +1,18 @@
 <div class="card mt-2">
     <div class="card-body">
         <div class="card-title">
-            <div class="row mb-2">
-                <div class="col-11"><h4>Password</h4></div>
-                <div class="col-1">
+            <div class="container-fluid row mb-2">
+                <div class="col-10 col-sm-11"><h4>Password</h4></div>
+                <div class="col-1 text-end">
                     <button class="btn btn-primary btn-sm" (click)="toggleViewMode()" *ngIf="(hasChangePasswordAbility | async)">{{isViewMode ? 'Edit' : 'Cancel'}}</button>
                 </div>
             </div>
         </div>
 
         <ng-container *ngIf="isViewMode">
-            <span>***************</span>
+            <div class="container-fluid row">
+                <span class="col-12">***************</span>
+            </div>
         </ng-container>
 
         <div #collapse="ngbCollapse" [(ngbCollapse)]="isViewMode">