Added UI scaling tickbox to options menu

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}}

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"
   },

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"
   },

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 {