message: lint + adjustments
diff: import template from './app.html';
  import './app.scss';
  import changelog from '../views/changelog-toaster-release.html';
  -import { isPhonePortrait } from './mediaQueries';
  +import { isPhonePortrait, isPhonePortraitStream } from './mediaQueries';
  import _ from 'underscore';
  import i18next from 'i18next';
  @@ -31,28 +31,24 @@ function AppComponentCtrl(
  this.settings = dimSettingsService;
  $scope.$watch(() => this.settings.itemSize, (size) => {
  - if (!isPhonePortrait()) {
  document.querySelector('html').style.setProperty("--item-size", `${size}px`);
  - }
  });
  $scope.$watch(() => this.settings.charCol, (cols) => {
  - if (!isPhonePortrait()) {
  document.querySelector('html').style.setProperty("--character-columns", cols);
  - }
  });
  $scope.$watch(() => this.settings.vaultMaxCol, (cols) => {
  document.querySelector('html').style.setProperty("--vault-max-columns", cols);
  });
  $scope.$watch(() => this.settings.charColMobile, (cols) => {
  + // this check is needed so on start up/load this doesn't override the value set above on "normal" mode.
  if (isPhonePortrait()) {
  document.querySelector('html').style.setProperty("--character-columns", cols);
  }
  });
  -
  - // a watch on isPhonePortrait is needed when the user on mobile changes from portrait to landscape
  + // a subscribe on isPhonePortraitStream is needed when the user on mobile changes from portrait to landscape
  // or a user on desktop shrinks the browser window below isphoneportrait treshold value
  - $scope.$watch(() => isPhonePortrait(), (isPhonePortrait) => {
  + isPhonePortraitStream().subscribe((isPhonePortrait) => {
  if (isPhonePortrait) {
  document.querySelector('html').style.setProperty("--character-columns", this.settings.charColMobile);
  } else {
  