From eb5ad7c6dca6c16aa200e8e87adff8321cd3160b Mon Sep 17 00:00:00 2001
From: syntaxerror752 <revan1234@hotmail.com>
Date: Fri, 29 May 2020 21:28:26 +1000
Subject: [PATCH 1/6] Added UI scaling tickbox to options menu

---
 src/app/settings/options.component.html | 10 ++++++++++
 src/locales/en/messages.json            |  7 +++++++
 src/locales/en_GB/messages.json         |  7 +++++++
 src/scss/styles.scss                    |  4 ++++
 4 files changed, 28 insertions(+)

diff --git a/src/app/settings/options.component.html b/src/app/settings/options.component.html
index 79a6c35bbe..182f0088ec 100644
--- a/src/app/settings/options.component.html
+++ b/src/app/settings/options.component.html
@@ -76,6 +76,16 @@
             </a>
         </div>
         <small class="form-text text-muted">{{'enableGravatarsDesc' | i18n}}</small>
+    </div>
+	<div class="form-group">
+        <div class="form-check">
+            <input class="form-check-input" type="checkbox" id="enableUIScaling" name="enableUIScaling"
+                [(ngModel)]="enableUIScaling">
+            <label class="form-check-label" for="enableUIScaling">
+                {{'enableUIScaling' | i18n}}
+            </label>
+        </div>
+        <small class="form-text text-muted">{{'enableUIScalingDesc' | i18n}}</small>
     </div>
     <button type="submit" class="btn btn-primary">
         {{'save' | i18n}}
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index 832b597078..91b0321030 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -1044,6 +1044,13 @@
   "enableGravatarsDesc": {
     "message": "Use avatar images loaded from gravatar.com."
   },
+  "enableUIScaling": {
+    "message": "Enable UI Scaling",
+    "description": "Allows scaling the web vault UI's width"
+  },
+  "enableUIScalingDesc": {
+    "message": "Allows expanding the web vault view to fill the full width of the browser window."
+  },
   "default": {
     "message": "Default"
   },
diff --git a/src/locales/en_GB/messages.json b/src/locales/en_GB/messages.json
index d15c21696f..0824d2df95 100644
--- a/src/locales/en_GB/messages.json
+++ b/src/locales/en_GB/messages.json
@@ -1044,6 +1044,13 @@
   "enableGravatarsDesc": {
     "message": "Use avatar images loaded from gravatar.com."
   },
+  "enableUIScaling": {
+    "message": "Enable UI Scaling",
+    "description": "Allows scaling the web vault UI's width"
+  },
+  "enableUIScalingDesc": {
+    "message": "Allows expanding the web vault view to fill the full width of the browser window."
+  },
   "default": {
     "message": "Default"
   },
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index d85b084f8b..564c08dd5b 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -192,6 +192,10 @@ input, select, textarea {
     max-width: none !important;
     margin: 0 auto;
     padding: 0;
+    &.full-width {
+        min-width: 980px;
+        width: 90%;
+    }
 }
 
 .page-content {

From 674c583881f6dd3b0301b04fc988dcce1d9253f8 Mon Sep 17 00:00:00 2001
From: syntaxerror752 <revan1234@hotmail.com>
Date: Fri, 29 May 2020 23:08:03 +1000
Subject: [PATCH 2/6] Update HTML and TS scripts for UI scaling

---
 src/app/organizations/manage/manage.component.html     | 2 +-
 src/app/organizations/manage/manage.component.ts       | 5 ++++-
 src/app/organizations/settings/settings.component.html | 2 +-
 src/app/organizations/settings/settings.component.ts   | 5 ++++-
 src/app/organizations/tools/tools.component.html       | 2 +-
 src/app/organizations/tools/tools.component.ts         | 5 ++++-
 src/app/organizations/vault/vault.component.html       | 2 +-
 src/app/organizations/vault/vault.component.ts         | 5 ++++-
 src/app/settings/options.component.ts                  | 4 ++++
 src/app/settings/settings.component.html               | 2 +-
 src/app/settings/settings.component.ts                 | 5 ++++-
 src/app/tools/tools.component.html                     | 2 +-
 src/app/tools/tools.component.ts                       | 5 ++++-
 src/app/vault/vault.component.html                     | 2 +-
 src/app/vault/vault.component.ts                       | 6 +++++-
 src/services/htmlStorage.service.ts                    | 2 +-
 16 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/app/organizations/manage/manage.component.html b/src/app/organizations/manage/manage.component.html
index c54f1a117f..49b87986de 100644
--- a/src/app/organizations/manage/manage.component.html
+++ b/src/app/organizations/manage/manage.component.html
@@ -1,4 +1,4 @@
-<div class="container page-content">
+<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
     <div class="row">
         <div class="col-3">
             <div class="card" *ngIf="organization">
diff --git a/src/app/organizations/manage/manage.component.ts b/src/app/organizations/manage/manage.component.ts
index c6042bfbb3..2cfe7ba94c 100644
--- a/src/app/organizations/manage/manage.component.ts
+++ b/src/app/organizations/manage/manage.component.ts
@@ -5,6 +5,7 @@ import {
 import { ActivatedRoute } from '@angular/router';
 
 import { UserService } from 'jslib/abstractions/user.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 
 import { Organization } from 'jslib/models/domain/organization';
 
@@ -17,11 +18,13 @@ export class ManageComponent implements OnInit {
     accessPolicies = false;
     accessGroups = false;
     accessEvents = false;
+    scaleUIWidth: boolean = false;
 
-    constructor(private route: ActivatedRoute, private userService: UserService) { }
+    constructor(private route: ActivatedRoute, private userService: UserService, private storageService: StorageService) { }
 
     ngOnInit() {
         this.route.parent.params.subscribe(async (params) => {
+            this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
             this.organization = await this.userService.getOrganization(params.organizationId);
             this.accessPolicies = this.organization.usePolicies;
             this.accessEvents = this.organization.useEvents;
diff --git a/src/app/organizations/settings/settings.component.html b/src/app/organizations/settings/settings.component.html
index 2dac5ac185..e7cce8e587 100644
--- a/src/app/organizations/settings/settings.component.html
+++ b/src/app/organizations/settings/settings.component.html
@@ -1,4 +1,4 @@
-<div class="container page-content">
+<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
     <div class="row">
         <div class="col-3">
             <div class="card">
diff --git a/src/app/organizations/settings/settings.component.ts b/src/app/organizations/settings/settings.component.ts
index c2db836085..ff5441e32f 100644
--- a/src/app/organizations/settings/settings.component.ts
+++ b/src/app/organizations/settings/settings.component.ts
@@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { UserService } from 'jslib/abstractions/user.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 
 @Component({
     selector: 'app-org-settings',
@@ -11,12 +12,14 @@ import { UserService } from 'jslib/abstractions/user.service';
 export class SettingsComponent {
     access2fa = false;
     selfHosted: boolean;
+    scaleUIWidth: boolean = false;
 
     constructor(private route: ActivatedRoute, private userService: UserService,
-        private platformUtilsService: PlatformUtilsService) { }
+        private platformUtilsService: PlatformUtilsService, private storageService: StorageService) { }
 
     ngOnInit() {
         this.route.parent.params.subscribe(async (params) => {
+            this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
             this.selfHosted = await this.platformUtilsService.isSelfHost();
             const organization = await this.userService.getOrganization(params.organizationId);
             this.access2fa = organization.use2fa;
diff --git a/src/app/organizations/tools/tools.component.html b/src/app/organizations/tools/tools.component.html
index 0ffb712568..1f24beaa67 100644
--- a/src/app/organizations/tools/tools.component.html
+++ b/src/app/organizations/tools/tools.component.html
@@ -1,4 +1,4 @@
-<div class="container page-content">
+<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
     <div class="row">
         <div class="col-3">
             <div class="card mb-4">
diff --git a/src/app/organizations/tools/tools.component.ts b/src/app/organizations/tools/tools.component.ts
index 4df7d2523b..a31fed0c0f 100644
--- a/src/app/organizations/tools/tools.component.ts
+++ b/src/app/organizations/tools/tools.component.ts
@@ -5,6 +5,7 @@ import { Organization } from 'jslib/models/domain/organization';
 
 import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { UserService } from 'jslib/abstractions/user.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 
 @Component({
     selector: 'app-org-tools',
@@ -13,12 +14,14 @@ import { UserService } from 'jslib/abstractions/user.service';
 export class ToolsComponent {
     organization: Organization;
     accessReports = false;
+    scaleUIWidth: boolean = false;
 
     constructor(private route: ActivatedRoute, private userService: UserService,
-        private messagingService: MessagingService) { }
+        private messagingService: MessagingService, private storageService: StorageService) { }
 
     ngOnInit() {
         this.route.parent.params.subscribe(async (params) => {
+            this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
             this.organization = await this.userService.getOrganization(params.organizationId);
             // TODO: Maybe we want to just make sure they are not on a free plan? Just compare useTotp for now
             // since all paid plans include useTotp
diff --git a/src/app/organizations/vault/vault.component.html b/src/app/organizations/vault/vault.component.html
index 3f836dee51..a54060e95f 100644
--- a/src/app/organizations/vault/vault.component.html
+++ b/src/app/organizations/vault/vault.component.html
@@ -1,4 +1,4 @@
-<div class="container page-content">
+<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
     <div class="row">
         <div class="col-3">
             <app-org-vault-groupings [showFolders]="false" [showFavorites]="false" [showTrash]="true"
diff --git a/src/app/organizations/vault/vault.component.ts b/src/app/organizations/vault/vault.component.ts
index b42bcbf60f..f5038bab7e 100644
--- a/src/app/organizations/vault/vault.component.ts
+++ b/src/app/organizations/vault/vault.component.ts
@@ -19,6 +19,7 @@ import { SyncService } from 'jslib/abstractions/sync.service';
 import { UserService } from 'jslib/abstractions/user.service';
 
 import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 
 import { Organization } from 'jslib/models/domain/organization';
 import { CipherView } from 'jslib/models/view/cipherView';
@@ -52,6 +53,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     collectionId: string = null;
     type: CipherType = null;
     deleted: boolean = false;
+    scaleUIWidth: boolean = false;
 
     private modal: ModalComponent = null;
 
@@ -59,10 +61,11 @@ export class VaultComponent implements OnInit, OnDestroy {
         private router: Router, private changeDetectorRef: ChangeDetectorRef,
         private syncService: SyncService, private i18nService: I18nService,
         private componentFactoryResolver: ComponentFactoryResolver, private messagingService: MessagingService,
-        private broadcasterService: BroadcasterService, private ngZone: NgZone) { }
+        private broadcasterService: BroadcasterService, private storageService: StorageService, private ngZone: NgZone) { }
 
     ngOnInit() {
         const queryParams = this.route.parent.params.subscribe(async (params) => {
+            this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
             this.organization = await this.userService.getOrganization(params.organizationId);
             this.groupingsComponent.organization = this.organization;
             this.ciphersComponent.organization = this.organization;
diff --git a/src/app/settings/options.component.ts b/src/app/settings/options.component.ts
index 4d78395849..87f6ec6fb2 100644
--- a/src/app/settings/options.component.ts
+++ b/src/app/settings/options.component.ts
@@ -25,6 +25,7 @@ export class OptionsComponent implements OnInit {
     vaultTimeoutAction: string = 'lock';
     disableIcons: boolean;
     enableGravatars: boolean;
+    enableUIScaling: boolean;
     locale: string;
     vaultTimeouts: any[];
     localeOptions: any[];
@@ -66,6 +67,7 @@ export class OptionsComponent implements OnInit {
         this.vaultTimeoutAction = await this.storageService.get<string>(ConstantsService.vaultTimeoutActionKey);
         this.disableIcons = await this.storageService.get<boolean>(ConstantsService.disableFaviconKey);
         this.enableGravatars = await this.storageService.get<boolean>('enableGravatars');
+        this.enableUIScaling = await this.storageService.get<boolean>('enableUIScaling');
         this.locale = this.startingLocale = await this.storageService.get<string>(ConstantsService.localeKey);
     }
 
@@ -76,6 +78,8 @@ export class OptionsComponent implements OnInit {
         await this.stateService.save(ConstantsService.disableFaviconKey, this.disableIcons);
         await this.storageService.save('enableGravatars', this.enableGravatars);
         await this.stateService.save('enableGravatars', this.enableGravatars);
+        await this.storageService.save('enableUIScaling', this.enableUIScaling);
+        await this.stateService.save('enableUIScaling', this.enableUIScaling);
         await this.storageService.save(ConstantsService.localeKey, this.locale);
         this.analytics.eventTrack.next({ action: 'Saved Options' });
         if (this.locale !== this.startingLocale) {
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
index 2ed3911852..a20066853a 100644
--- a/src/app/settings/settings.component.html
+++ b/src/app/settings/settings.component.html
@@ -1,4 +1,4 @@
-<div class="container page-content">
+<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
     <div class="row">
         <div class="col-3">
             <div class="card">
diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts
index 083c538bc7..cf79e8d78e 100644
--- a/src/app/settings/settings.component.ts
+++ b/src/app/settings/settings.component.ts
@@ -9,6 +9,7 @@ import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { TokenService } from 'jslib/abstractions/token.service';
 
 import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 
 const BroadcasterSubscriptionId = 'SettingsComponent';
 
@@ -19,11 +20,13 @@ const BroadcasterSubscriptionId = 'SettingsComponent';
 export class SettingsComponent implements OnInit, OnDestroy {
     premium: boolean;
     selfHosted: boolean;
+    scaleUIWidth: boolean = false;
 
     constructor(private tokenService: TokenService, private broadcasterService: BroadcasterService,
-        private ngZone: NgZone, private platformUtilsService: PlatformUtilsService) { }
+        private ngZone: NgZone, private platformUtilsService: PlatformUtilsService, private storageService: StorageService) { }
 
     async ngOnInit() {
+        this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
         this.broadcasterService.subscribe(BroadcasterSubscriptionId, async (message: any) => {
             this.ngZone.run(async () => {
                 switch (message.command) {
diff --git a/src/app/tools/tools.component.html b/src/app/tools/tools.component.html
index 69c6263efd..841c14a92f 100644
--- a/src/app/tools/tools.component.html
+++ b/src/app/tools/tools.component.html
@@ -1,4 +1,4 @@
-<div class="container page-content">
+<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
     <div class="row">
         <div class="col-3">
             <div class="card mb-4">
diff --git a/src/app/tools/tools.component.ts b/src/app/tools/tools.component.ts
index f9ecdbe7a1..3665a60bbf 100644
--- a/src/app/tools/tools.component.ts
+++ b/src/app/tools/tools.component.ts
@@ -5,6 +5,7 @@ import {
 
 import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { UserService } from 'jslib/abstractions/user.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 
 @Component({
     selector: 'app-tools',
@@ -12,10 +13,12 @@ import { UserService } from 'jslib/abstractions/user.service';
 })
 export class ToolsComponent implements OnInit {
     canAccessPremium = false;
+    scaleUIWidth: boolean = false;
 
-    constructor(private userService: UserService, private messagingService: MessagingService) { }
+    constructor(private userService: UserService, private messagingService: MessagingService, private storageService: StorageService) { }
 
     async ngOnInit() {
+        this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
         this.canAccessPremium = await this.userService.canAccessPremium();
     }
 
diff --git a/src/app/vault/vault.component.html b/src/app/vault/vault.component.html
index 3b5ace702e..27b1d47cd2 100644
--- a/src/app/vault/vault.component.html
+++ b/src/app/vault/vault.component.html
@@ -1,4 +1,4 @@
-<div class="container page-content">
+<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
     <div class="row">
         <div class="col-3">
             <app-vault-groupings (onAllClicked)="clearGroupingFilters()" (onFavoritesClicked)="filterFavorites()"
diff --git a/src/app/vault/vault.component.ts b/src/app/vault/vault.component.ts
index ee3705732d..929325ed51 100644
--- a/src/app/vault/vault.component.ts
+++ b/src/app/vault/vault.component.ts
@@ -42,6 +42,7 @@ import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { SyncService } from 'jslib/abstractions/sync.service';
 import { TokenService } from 'jslib/abstractions/token.service';
 import { UserService } from 'jslib/abstractions/user.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 
 import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
 
@@ -75,6 +76,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     showUpdateKey = false;
     showPremiumCallout = false;
     deleted: boolean = false;
+    scaleUIWidth: boolean = false;
 
     private modal: ModalComponent = null;
 
@@ -84,9 +86,11 @@ export class VaultComponent implements OnInit, OnDestroy {
         private tokenService: TokenService, private cryptoService: CryptoService,
         private messagingService: MessagingService, private userService: UserService,
         private platformUtilsService: PlatformUtilsService, private toasterService: ToasterService,
-        private broadcasterService: BroadcasterService, private ngZone: NgZone) { }
+        private broadcasterService: BroadcasterService, private storageService: StorageService,
+        private ngZone: NgZone) { }
 
     async ngOnInit() {
+        this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
         this.showVerifyEmail = !(await this.tokenService.getEmailVerified());
         this.showBrowserOutdated = window.navigator.userAgent.indexOf('MSIE') !== -1;
 
diff --git a/src/services/htmlStorage.service.ts b/src/services/htmlStorage.service.ts
index 041463e14c..bff1a7dcef 100644
--- a/src/services/htmlStorage.service.ts
+++ b/src/services/htmlStorage.service.ts
@@ -4,7 +4,7 @@ import { ConstantsService } from 'jslib/services';
 
 export class HtmlStorageService implements StorageService {
     private localStorageKeys = new Set(['appId', 'anonymousAppId', 'rememberedEmail', 'passwordGenerationOptions',
-        ConstantsService.disableFaviconKey, 'rememberEmail', 'enableGravatars', ConstantsService.localeKey,
+        ConstantsService.disableFaviconKey, 'rememberEmail', 'enableGravatars', 'enableUIScaling', ConstantsService.localeKey,
         ConstantsService.autoConfirmFingerprints, ConstantsService.vaultTimeoutKey,
         ConstantsService.vaultTimeoutActionKey]);
     private localStorageStartsWithKeys = ['twoFactorToken_', ConstantsService.collapsedGroupingsKey + '_'];

From f36bba64062094bed532341f312c1d5f5e14baf5 Mon Sep 17 00:00:00 2001
From: syntaxerror752 <revan1234@hotmail.com>
Date: Sat, 30 May 2020 10:21:42 +1000
Subject: [PATCH 3/6] Revert last commit due to requested changes

Revert last commit due to requested changes.
Renamed variable.
---
 src/app/organizations/manage/manage.component.html     |  2 +-
 src/app/organizations/manage/manage.component.ts       |  5 +----
 src/app/organizations/settings/settings.component.html |  2 +-
 src/app/organizations/settings/settings.component.ts   |  5 +----
 src/app/organizations/tools/tools.component.html       |  2 +-
 src/app/organizations/tools/tools.component.ts         |  5 +----
 src/app/organizations/vault/vault.component.html       |  2 +-
 src/app/organizations/vault/vault.component.ts         |  5 +----
 src/app/settings/options.component.html                | 10 +++++-----
 src/app/settings/options.component.ts                  |  8 ++++----
 src/app/settings/settings.component.html               |  2 +-
 src/app/settings/settings.component.ts                 |  5 +----
 src/app/tools/tools.component.html                     |  2 +-
 src/app/tools/tools.component.ts                       |  5 +----
 src/app/vault/vault.component.html                     |  2 +-
 src/app/vault/vault.component.ts                       |  6 +-----
 src/locales/en/messages.json                           |  6 +++---
 src/locales/en_GB/messages.json                        |  7 -------
 src/services/htmlStorage.service.ts                    |  2 +-
 19 files changed, 27 insertions(+), 56 deletions(-)

diff --git a/src/app/organizations/manage/manage.component.html b/src/app/organizations/manage/manage.component.html
index 49b87986de..c54f1a117f 100644
--- a/src/app/organizations/manage/manage.component.html
+++ b/src/app/organizations/manage/manage.component.html
@@ -1,4 +1,4 @@
-<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
+<div class="container page-content">
     <div class="row">
         <div class="col-3">
             <div class="card" *ngIf="organization">
diff --git a/src/app/organizations/manage/manage.component.ts b/src/app/organizations/manage/manage.component.ts
index 2cfe7ba94c..c6042bfbb3 100644
--- a/src/app/organizations/manage/manage.component.ts
+++ b/src/app/organizations/manage/manage.component.ts
@@ -5,7 +5,6 @@ import {
 import { ActivatedRoute } from '@angular/router';
 
 import { UserService } from 'jslib/abstractions/user.service';
-import { StorageService } from 'jslib/abstractions/storage.service';
 
 import { Organization } from 'jslib/models/domain/organization';
 
@@ -18,13 +17,11 @@ export class ManageComponent implements OnInit {
     accessPolicies = false;
     accessGroups = false;
     accessEvents = false;
-    scaleUIWidth: boolean = false;
 
-    constructor(private route: ActivatedRoute, private userService: UserService, private storageService: StorageService) { }
+    constructor(private route: ActivatedRoute, private userService: UserService) { }
 
     ngOnInit() {
         this.route.parent.params.subscribe(async (params) => {
-            this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
             this.organization = await this.userService.getOrganization(params.organizationId);
             this.accessPolicies = this.organization.usePolicies;
             this.accessEvents = this.organization.useEvents;
diff --git a/src/app/organizations/settings/settings.component.html b/src/app/organizations/settings/settings.component.html
index e7cce8e587..2dac5ac185 100644
--- a/src/app/organizations/settings/settings.component.html
+++ b/src/app/organizations/settings/settings.component.html
@@ -1,4 +1,4 @@
-<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
+<div class="container page-content">
     <div class="row">
         <div class="col-3">
             <div class="card">
diff --git a/src/app/organizations/settings/settings.component.ts b/src/app/organizations/settings/settings.component.ts
index ff5441e32f..c2db836085 100644
--- a/src/app/organizations/settings/settings.component.ts
+++ b/src/app/organizations/settings/settings.component.ts
@@ -3,7 +3,6 @@ import { ActivatedRoute } from '@angular/router';
 
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { UserService } from 'jslib/abstractions/user.service';
-import { StorageService } from 'jslib/abstractions/storage.service';
 
 @Component({
     selector: 'app-org-settings',
@@ -12,14 +11,12 @@ import { StorageService } from 'jslib/abstractions/storage.service';
 export class SettingsComponent {
     access2fa = false;
     selfHosted: boolean;
-    scaleUIWidth: boolean = false;
 
     constructor(private route: ActivatedRoute, private userService: UserService,
-        private platformUtilsService: PlatformUtilsService, private storageService: StorageService) { }
+        private platformUtilsService: PlatformUtilsService) { }
 
     ngOnInit() {
         this.route.parent.params.subscribe(async (params) => {
-            this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
             this.selfHosted = await this.platformUtilsService.isSelfHost();
             const organization = await this.userService.getOrganization(params.organizationId);
             this.access2fa = organization.use2fa;
diff --git a/src/app/organizations/tools/tools.component.html b/src/app/organizations/tools/tools.component.html
index 1f24beaa67..0ffb712568 100644
--- a/src/app/organizations/tools/tools.component.html
+++ b/src/app/organizations/tools/tools.component.html
@@ -1,4 +1,4 @@
-<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
+<div class="container page-content">
     <div class="row">
         <div class="col-3">
             <div class="card mb-4">
diff --git a/src/app/organizations/tools/tools.component.ts b/src/app/organizations/tools/tools.component.ts
index a31fed0c0f..4df7d2523b 100644
--- a/src/app/organizations/tools/tools.component.ts
+++ b/src/app/organizations/tools/tools.component.ts
@@ -5,7 +5,6 @@ import { Organization } from 'jslib/models/domain/organization';
 
 import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { UserService } from 'jslib/abstractions/user.service';
-import { StorageService } from 'jslib/abstractions/storage.service';
 
 @Component({
     selector: 'app-org-tools',
@@ -14,14 +13,12 @@ import { StorageService } from 'jslib/abstractions/storage.service';
 export class ToolsComponent {
     organization: Organization;
     accessReports = false;
-    scaleUIWidth: boolean = false;
 
     constructor(private route: ActivatedRoute, private userService: UserService,
-        private messagingService: MessagingService, private storageService: StorageService) { }
+        private messagingService: MessagingService) { }
 
     ngOnInit() {
         this.route.parent.params.subscribe(async (params) => {
-            this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
             this.organization = await this.userService.getOrganization(params.organizationId);
             // TODO: Maybe we want to just make sure they are not on a free plan? Just compare useTotp for now
             // since all paid plans include useTotp
diff --git a/src/app/organizations/vault/vault.component.html b/src/app/organizations/vault/vault.component.html
index a54060e95f..3f836dee51 100644
--- a/src/app/organizations/vault/vault.component.html
+++ b/src/app/organizations/vault/vault.component.html
@@ -1,4 +1,4 @@
-<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
+<div class="container page-content">
     <div class="row">
         <div class="col-3">
             <app-org-vault-groupings [showFolders]="false" [showFavorites]="false" [showTrash]="true"
diff --git a/src/app/organizations/vault/vault.component.ts b/src/app/organizations/vault/vault.component.ts
index f5038bab7e..b42bcbf60f 100644
--- a/src/app/organizations/vault/vault.component.ts
+++ b/src/app/organizations/vault/vault.component.ts
@@ -19,7 +19,6 @@ import { SyncService } from 'jslib/abstractions/sync.service';
 import { UserService } from 'jslib/abstractions/user.service';
 
 import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
-import { StorageService } from 'jslib/abstractions/storage.service';
 
 import { Organization } from 'jslib/models/domain/organization';
 import { CipherView } from 'jslib/models/view/cipherView';
@@ -53,7 +52,6 @@ export class VaultComponent implements OnInit, OnDestroy {
     collectionId: string = null;
     type: CipherType = null;
     deleted: boolean = false;
-    scaleUIWidth: boolean = false;
 
     private modal: ModalComponent = null;
 
@@ -61,11 +59,10 @@ export class VaultComponent implements OnInit, OnDestroy {
         private router: Router, private changeDetectorRef: ChangeDetectorRef,
         private syncService: SyncService, private i18nService: I18nService,
         private componentFactoryResolver: ComponentFactoryResolver, private messagingService: MessagingService,
-        private broadcasterService: BroadcasterService, private storageService: StorageService, private ngZone: NgZone) { }
+        private broadcasterService: BroadcasterService, private ngZone: NgZone) { }
 
     ngOnInit() {
         const queryParams = this.route.parent.params.subscribe(async (params) => {
-            this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
             this.organization = await this.userService.getOrganization(params.organizationId);
             this.groupingsComponent.organization = this.organization;
             this.ciphersComponent.organization = this.organization;
diff --git a/src/app/settings/options.component.html b/src/app/settings/options.component.html
index 182f0088ec..b369b90f6f 100644
--- a/src/app/settings/options.component.html
+++ b/src/app/settings/options.component.html
@@ -79,13 +79,13 @@
     </div>
 	<div class="form-group">
         <div class="form-check">
-            <input class="form-check-input" type="checkbox" id="enableUIScaling" name="enableUIScaling"
-                [(ngModel)]="enableUIScaling">
-            <label class="form-check-label" for="enableUIScaling">
-                {{'enableUIScaling' | i18n}}
+            <input class="form-check-input" type="checkbox" id="enableFullWidth" name="enableFullWidth"
+                [(ngModel)]="enableFullWidth">
+            <label class="form-check-label" for="enableFullWidth">
+                {{'enableFullWidth' | i18n}}
             </label>
         </div>
-        <small class="form-text text-muted">{{'enableUIScalingDesc' | i18n}}</small>
+        <small class="form-text text-muted">{{'enableFullWidthDesc' | i18n}}</small>
     </div>
     <button type="submit" class="btn btn-primary">
         {{'save' | i18n}}
diff --git a/src/app/settings/options.component.ts b/src/app/settings/options.component.ts
index 87f6ec6fb2..799d711dad 100644
--- a/src/app/settings/options.component.ts
+++ b/src/app/settings/options.component.ts
@@ -25,7 +25,7 @@ export class OptionsComponent implements OnInit {
     vaultTimeoutAction: string = 'lock';
     disableIcons: boolean;
     enableGravatars: boolean;
-    enableUIScaling: boolean;
+    enableFullWidth: boolean;
     locale: string;
     vaultTimeouts: any[];
     localeOptions: any[];
@@ -67,7 +67,7 @@ export class OptionsComponent implements OnInit {
         this.vaultTimeoutAction = await this.storageService.get<string>(ConstantsService.vaultTimeoutActionKey);
         this.disableIcons = await this.storageService.get<boolean>(ConstantsService.disableFaviconKey);
         this.enableGravatars = await this.storageService.get<boolean>('enableGravatars');
-        this.enableUIScaling = await this.storageService.get<boolean>('enableUIScaling');
+        this.enableFullWidth = await this.storageService.get<boolean>('enableFullWidth');
         this.locale = this.startingLocale = await this.storageService.get<string>(ConstantsService.localeKey);
     }
 
@@ -78,8 +78,8 @@ export class OptionsComponent implements OnInit {
         await this.stateService.save(ConstantsService.disableFaviconKey, this.disableIcons);
         await this.storageService.save('enableGravatars', this.enableGravatars);
         await this.stateService.save('enableGravatars', this.enableGravatars);
-        await this.storageService.save('enableUIScaling', this.enableUIScaling);
-        await this.stateService.save('enableUIScaling', this.enableUIScaling);
+        await this.storageService.save('enableFullWidth', this.enableFullWidth);
+        await this.stateService.save('enableFullWidth', this.enableFullWidth);
         await this.storageService.save(ConstantsService.localeKey, this.locale);
         this.analytics.eventTrack.next({ action: 'Saved Options' });
         if (this.locale !== this.startingLocale) {
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
index a20066853a..2ed3911852 100644
--- a/src/app/settings/settings.component.html
+++ b/src/app/settings/settings.component.html
@@ -1,4 +1,4 @@
-<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
+<div class="container page-content">
     <div class="row">
         <div class="col-3">
             <div class="card">
diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts
index cf79e8d78e..083c538bc7 100644
--- a/src/app/settings/settings.component.ts
+++ b/src/app/settings/settings.component.ts
@@ -9,7 +9,6 @@ import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { TokenService } from 'jslib/abstractions/token.service';
 
 import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
-import { StorageService } from 'jslib/abstractions/storage.service';
 
 const BroadcasterSubscriptionId = 'SettingsComponent';
 
@@ -20,13 +19,11 @@ const BroadcasterSubscriptionId = 'SettingsComponent';
 export class SettingsComponent implements OnInit, OnDestroy {
     premium: boolean;
     selfHosted: boolean;
-    scaleUIWidth: boolean = false;
 
     constructor(private tokenService: TokenService, private broadcasterService: BroadcasterService,
-        private ngZone: NgZone, private platformUtilsService: PlatformUtilsService, private storageService: StorageService) { }
+        private ngZone: NgZone, private platformUtilsService: PlatformUtilsService) { }
 
     async ngOnInit() {
-        this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
         this.broadcasterService.subscribe(BroadcasterSubscriptionId, async (message: any) => {
             this.ngZone.run(async () => {
                 switch (message.command) {
diff --git a/src/app/tools/tools.component.html b/src/app/tools/tools.component.html
index 841c14a92f..69c6263efd 100644
--- a/src/app/tools/tools.component.html
+++ b/src/app/tools/tools.component.html
@@ -1,4 +1,4 @@
-<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
+<div class="container page-content">
     <div class="row">
         <div class="col-3">
             <div class="card mb-4">
diff --git a/src/app/tools/tools.component.ts b/src/app/tools/tools.component.ts
index 3665a60bbf..f9ecdbe7a1 100644
--- a/src/app/tools/tools.component.ts
+++ b/src/app/tools/tools.component.ts
@@ -5,7 +5,6 @@ import {
 
 import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { UserService } from 'jslib/abstractions/user.service';
-import { StorageService } from 'jslib/abstractions/storage.service';
 
 @Component({
     selector: 'app-tools',
@@ -13,12 +12,10 @@ import { StorageService } from 'jslib/abstractions/storage.service';
 })
 export class ToolsComponent implements OnInit {
     canAccessPremium = false;
-    scaleUIWidth: boolean = false;
 
-    constructor(private userService: UserService, private messagingService: MessagingService, private storageService: StorageService) { }
+    constructor(private userService: UserService, private messagingService: MessagingService) { }
 
     async ngOnInit() {
-        this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
         this.canAccessPremium = await this.userService.canAccessPremium();
     }
 
diff --git a/src/app/vault/vault.component.html b/src/app/vault/vault.component.html
index 27b1d47cd2..3b5ace702e 100644
--- a/src/app/vault/vault.component.html
+++ b/src/app/vault/vault.component.html
@@ -1,4 +1,4 @@
-<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
+<div class="container page-content">
     <div class="row">
         <div class="col-3">
             <app-vault-groupings (onAllClicked)="clearGroupingFilters()" (onFavoritesClicked)="filterFavorites()"
diff --git a/src/app/vault/vault.component.ts b/src/app/vault/vault.component.ts
index 929325ed51..ee3705732d 100644
--- a/src/app/vault/vault.component.ts
+++ b/src/app/vault/vault.component.ts
@@ -42,7 +42,6 @@ import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { SyncService } from 'jslib/abstractions/sync.service';
 import { TokenService } from 'jslib/abstractions/token.service';
 import { UserService } from 'jslib/abstractions/user.service';
-import { StorageService } from 'jslib/abstractions/storage.service';
 
 import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
 
@@ -76,7 +75,6 @@ export class VaultComponent implements OnInit, OnDestroy {
     showUpdateKey = false;
     showPremiumCallout = false;
     deleted: boolean = false;
-    scaleUIWidth: boolean = false;
 
     private modal: ModalComponent = null;
 
@@ -86,11 +84,9 @@ export class VaultComponent implements OnInit, OnDestroy {
         private tokenService: TokenService, private cryptoService: CryptoService,
         private messagingService: MessagingService, private userService: UserService,
         private platformUtilsService: PlatformUtilsService, private toasterService: ToasterService,
-        private broadcasterService: BroadcasterService, private storageService: StorageService,
-        private ngZone: NgZone) { }
+        private broadcasterService: BroadcasterService, private ngZone: NgZone) { }
 
     async ngOnInit() {
-        this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
         this.showVerifyEmail = !(await this.tokenService.getEmailVerified());
         this.showBrowserOutdated = window.navigator.userAgent.indexOf('MSIE') !== -1;
 
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index 91b0321030..51557af40f 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -1044,11 +1044,11 @@
   "enableGravatarsDesc": {
     "message": "Use avatar images loaded from gravatar.com."
   },
-  "enableUIScaling": {
-    "message": "Enable UI Scaling",
+  "enableFullWidth": {
+    "message": "Enable Full Width",
     "description": "Allows scaling the web vault UI's width"
   },
-  "enableUIScalingDesc": {
+  "enableFullWidthDesc": {
     "message": "Allows expanding the web vault view to fill the full width of the browser window."
   },
   "default": {
diff --git a/src/locales/en_GB/messages.json b/src/locales/en_GB/messages.json
index 0824d2df95..d15c21696f 100644
--- a/src/locales/en_GB/messages.json
+++ b/src/locales/en_GB/messages.json
@@ -1044,13 +1044,6 @@
   "enableGravatarsDesc": {
     "message": "Use avatar images loaded from gravatar.com."
   },
-  "enableUIScaling": {
-    "message": "Enable UI Scaling",
-    "description": "Allows scaling the web vault UI's width"
-  },
-  "enableUIScalingDesc": {
-    "message": "Allows expanding the web vault view to fill the full width of the browser window."
-  },
   "default": {
     "message": "Default"
   },
diff --git a/src/services/htmlStorage.service.ts b/src/services/htmlStorage.service.ts
index bff1a7dcef..3fa7e89d19 100644
--- a/src/services/htmlStorage.service.ts
+++ b/src/services/htmlStorage.service.ts
@@ -4,7 +4,7 @@ import { ConstantsService } from 'jslib/services';
 
 export class HtmlStorageService implements StorageService {
     private localStorageKeys = new Set(['appId', 'anonymousAppId', 'rememberedEmail', 'passwordGenerationOptions',
-        ConstantsService.disableFaviconKey, 'rememberEmail', 'enableGravatars', 'enableUIScaling', ConstantsService.localeKey,
+        ConstantsService.disableFaviconKey, 'rememberEmail', 'enableGravatars', 'enableFullWidth', ConstantsService.localeKey,
         ConstantsService.autoConfirmFingerprints, ConstantsService.vaultTimeoutKey,
         ConstantsService.vaultTimeoutActionKey]);
     private localStorageStartsWithKeys = ['twoFactorToken_', ConstantsService.collapsedGroupingsKey + '_'];

From 22a00b23413669afdb68457e821134c53a27dc63 Mon Sep 17 00:00:00 2001
From: syntaxerror752 <revan1234@hotmail.com>
Date: Sat, 30 May 2020 18:30:35 +1000
Subject: [PATCH 4/6] Added toggle full width function

Added toggle full width function.
Added messaging service to trigger function.
Added CSS to keep login box the same size.
---
 src/app/app.component.ts              | 17 ++++++++++++++++-
 src/app/settings/options.component.ts |  4 +++-
 src/locales/en/messages.json          |  2 +-
 src/scss/styles.scss                  | 16 ++++++++++++----
 src/services/htmlStorage.service.ts   |  6 +++---
 5 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 2c694d95fe..36d7c652f0 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -35,6 +35,7 @@ import { CryptoService } from 'jslib/abstractions/crypto.service';
 import { EventService } from 'jslib/abstractions/event.service';
 import { FolderService } from 'jslib/abstractions/folder.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { NotificationsService } from 'jslib/abstractions/notifications.service';
 import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
@@ -69,6 +70,7 @@ export class AppComponent implements OnDestroy, OnInit {
     private lastActivity: number = null;
     private idleTimer: number = null;
     private isIdle = false;
+    private enableFullWidth = false;
 
     constructor(private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
         private broadcasterService: BroadcasterService, private userService: UserService,
@@ -83,7 +85,7 @@ export class AppComponent implements OnDestroy, OnInit {
         private sanitizer: DomSanitizer, private searchService: SearchService,
         private notificationsService: NotificationsService, private routerService: RouterService,
         private stateService: StateService, private eventService: EventService,
-        private policyService: PolicyService) { }
+        private policyService: PolicyService, private messagingService: MessagingService) { }
 
     ngOnInit() {
         this.ngZone.runOutsideAngular(() => {
@@ -148,6 +150,10 @@ export class AppComponent implements OnDestroy, OnInit {
                             properties: { label: message.label },
                         });
                         break;
+                    case 'setFullWidth':
+                        this.enableFullWidth = await this.storageService.get<boolean>('enableFullWidth');
+                        this.setFullWidth();
+                        break;
                     default:
                         break;
                 }
@@ -166,6 +172,7 @@ export class AppComponent implements OnDestroy, OnInit {
                 }
             }
         });
+        this.messagingService.send('setFullWidth');
     }
 
     ngOnDestroy() {
@@ -262,4 +269,12 @@ export class AppComponent implements OnDestroy, OnInit {
             this.notificationsService.reconnectFromActivity();
         }
     }
+
+    private async setFullWidth() {
+        if (this.enableFullWidth) {
+            document.body.classList.add('full-width');
+        } else {
+            document.body.classList.remove('full-width');
+        }
+    }
 }
diff --git a/src/app/settings/options.component.ts b/src/app/settings/options.component.ts
index 799d711dad..23de0086ad 100644
--- a/src/app/settings/options.component.ts
+++ b/src/app/settings/options.component.ts
@@ -7,6 +7,7 @@ import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { StateService } from 'jslib/abstractions/state.service';
 import { StorageService } from 'jslib/abstractions/storage.service';
@@ -35,7 +36,7 @@ export class OptionsComponent implements OnInit {
     constructor(private storageService: StorageService, private stateService: StateService,
         private analytics: Angulartics2, private i18nService: I18nService,
         private toasterService: ToasterService, private vaultTimeoutService: VaultTimeoutService,
-        private platformUtilsService: PlatformUtilsService) {
+        private platformUtilsService: PlatformUtilsService, private messagingService: MessagingService) {
         this.vaultTimeouts = [
             { name: i18nService.t('oneMinute'), value: 1 },
             { name: i18nService.t('fiveMinutes'), value: 5 },
@@ -80,6 +81,7 @@ export class OptionsComponent implements OnInit {
         await this.stateService.save('enableGravatars', this.enableGravatars);
         await this.storageService.save('enableFullWidth', this.enableFullWidth);
         await this.stateService.save('enableFullWidth', this.enableFullWidth);
+        this.messagingService.send('setFullWidth');
         await this.storageService.save(ConstantsService.localeKey, this.locale);
         this.analytics.eventTrack.next({ action: 'Saved Options' });
         if (this.locale !== this.startingLocale) {
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index 51557af40f..5422ff76f6 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -1045,7 +1045,7 @@
     "message": "Use avatar images loaded from gravatar.com."
   },
   "enableFullWidth": {
-    "message": "Enable Full Width",
+    "message": "Enable Full Width Layout",
     "description": "Allows scaling the web vault UI's width"
   },
   "enableFullWidthDesc": {
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 564c08dd5b..2bb8fbc27e 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -123,6 +123,18 @@ body {
     &.layout_frontend {
         background-color: #ecf0f5;
     }
+
+    &.full-width {
+        .container {
+            min-width: 980px;
+            width: 90%;
+            .row {
+                .col-5 {
+                    max-width: 416px;
+                }
+            }
+        }
+    }
 }
 
 .page-header, .secondary-header {
@@ -192,10 +204,6 @@ input, select, textarea {
     max-width: none !important;
     margin: 0 auto;
     padding: 0;
-    &.full-width {
-        min-width: 980px;
-        width: 90%;
-    }
 }
 
 .page-content {
diff --git a/src/services/htmlStorage.service.ts b/src/services/htmlStorage.service.ts
index 3fa7e89d19..88870c84fb 100644
--- a/src/services/htmlStorage.service.ts
+++ b/src/services/htmlStorage.service.ts
@@ -4,9 +4,9 @@ import { ConstantsService } from 'jslib/services';
 
 export class HtmlStorageService implements StorageService {
     private localStorageKeys = new Set(['appId', 'anonymousAppId', 'rememberedEmail', 'passwordGenerationOptions',
-        ConstantsService.disableFaviconKey, 'rememberEmail', 'enableGravatars', 'enableFullWidth', ConstantsService.localeKey,
-        ConstantsService.autoConfirmFingerprints, ConstantsService.vaultTimeoutKey,
-        ConstantsService.vaultTimeoutActionKey]);
+        ConstantsService.disableFaviconKey, 'rememberEmail', 'enableGravatars', 'enableFullWidth',
+        ConstantsService.localeKey, ConstantsService.autoConfirmFingerprints,
+        ConstantsService.vaultTimeoutKey, ConstantsService.vaultTimeoutActionKey]);
     private localStorageStartsWithKeys = ['twoFactorToken_', ConstantsService.collapsedGroupingsKey + '_'];
 
     constructor(private platformUtilsService: PlatformUtilsService) { }

From d323e775cabf1767b84744b3c96e08d6c991f9bb Mon Sep 17 00:00:00 2001
From: syntaxerror752 <revan1234@hotmail.com>
Date: Sun, 31 May 2020 22:02:41 +1000
Subject: [PATCH 5/6] Removed the need for the messageing service to be in
 app.component.ts

---
 src/app/app.component.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 36d7c652f0..b17a685538 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -35,7 +35,6 @@ import { CryptoService } from 'jslib/abstractions/crypto.service';
 import { EventService } from 'jslib/abstractions/event.service';
 import { FolderService } from 'jslib/abstractions/folder.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
-import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { NotificationsService } from 'jslib/abstractions/notifications.service';
 import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
@@ -85,7 +84,7 @@ export class AppComponent implements OnDestroy, OnInit {
         private sanitizer: DomSanitizer, private searchService: SearchService,
         private notificationsService: NotificationsService, private routerService: RouterService,
         private stateService: StateService, private eventService: EventService,
-        private policyService: PolicyService, private messagingService: MessagingService) { }
+        private policyService: PolicyService) { }
 
     ngOnInit() {
         this.ngZone.runOutsideAngular(() => {
@@ -151,7 +150,6 @@ export class AppComponent implements OnDestroy, OnInit {
                         });
                         break;
                     case 'setFullWidth':
-                        this.enableFullWidth = await this.storageService.get<boolean>('enableFullWidth');
                         this.setFullWidth();
                         break;
                     default:
@@ -172,7 +170,7 @@ export class AppComponent implements OnDestroy, OnInit {
                 }
             }
         });
-        this.messagingService.send('setFullWidth');
+        this.setFullWidth();
     }
 
     ngOnDestroy() {
@@ -271,6 +269,7 @@ export class AppComponent implements OnDestroy, OnInit {
     }
 
     private async setFullWidth() {
+        this.enableFullWidth = await this.storageService.get<boolean>('enableFullWidth');
         if (this.enableFullWidth) {
             document.body.classList.add('full-width');
         } else {

From fea3bba0df1a727807f4b9f1c1eb656162c0a8b8 Mon Sep 17 00:00:00 2001
From: syntaxerror752 <revan1234@hotmail.com>
Date: Tue, 2 Jun 2020 08:29:58 +1000
Subject: [PATCH 6/6] Changed method of keeping the logon box the same size

---
 src/scss/styles.scss | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 2bb8fbc27e..eb48b6c4c6 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -124,15 +124,10 @@ body {
         background-color: #ecf0f5;
     }
 
-    &.full-width {
+    &.full-width:not(.layout_frontend) {
         .container {
             min-width: 980px;
             width: 90%;
-            .row {
-                .col-5 {
-                    max-width: 416px;
-                }
-            }
         }
     }
 }