diff --git a/CHANGELOG.md b/CHANGELOG.md
index 58fb827bf..49025481b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ All notable changes to this project will be documented in this file. This projec
### Bug Fixes
* **Config Editor:** Backup button actually downloads up the `config.json` now ([#144](https://github.com/oznu/homebridge-config-ui-x/issues/144))
+* **Config Editor:** Fixed issued using config editor on mobile devices ([#131](https://github.com/oznu/homebridge-config-ui-x/issues/131))
* **Accessory Control:** Accessory layout changes are now persistent again
## 3.8.7 (2018-07-28)
diff --git a/ui/src/app/config/config.component.html b/ui/src/app/config/config.component.html
index bdb63f2fd..72557317d 100644
--- a/ui/src/app/config/config.component.html
+++ b/ui/src/app/config/config.component.html
@@ -15,6 +15,7 @@
(keydown.control.s)="$event.preventDefault(); onSave()">
+
diff --git a/ui/src/app/config/config.component.ts b/ui/src/app/config/config.component.ts
index ac95100af..92dbbd9b3 100644
--- a/ui/src/app/config/config.component.ts
+++ b/ui/src/app/config/config.component.ts
@@ -20,6 +20,7 @@ import { ConfigRestoreBackupComponent } from './config.restore-backup.component'
export class ConfigComponent implements OnInit {
@Input() homebridgeConfig;
public saveInProgress: boolean;
+ public isMobile: any = false;
public backupUrl: string;
public options: any = { printMargin: false };
@@ -32,6 +33,7 @@ export class ConfigComponent implements OnInit {
private modalService: NgbModal
) {
this.backupUrl = environment.apiBaseUrl + '/api/backup/config.json?token=' + this.$auth.user.token;
+ this.isMobile = this.$md.detect.mobile();
// remove editor gutter on small screen devices
if (this.$md.detect.phone()) {
diff --git a/ui/src/scss/styles.scss b/ui/src/scss/styles.scss
index 5d9dc8a23..7e0e696e1 100644
--- a/ui/src/scss/styles.scss
+++ b/ui/src/scss/styles.scss
@@ -33,6 +33,12 @@ body {
padding-top: 5.5rem;
}
+@media only screen and (max-width: 600px) {
+ body {
+ padding-top: 4rem;
+ }
+}
+
#log-output {
bottom: 0;
top: 0;
@@ -127,6 +133,15 @@ body {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
+.hb-plain-text-editor {
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+ border: none;
+ white-space: pre;
+ font-family: monospace;
+ overflow-wrap: normal;
+ overflow-x: scroll;
+}
+
.status-circle {
color: #ffffff;
width: 40px;