diff --git a/.stylelintrc.json b/.stylelintrc.json
index 3e1a34b2..7827a4f2 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -26,7 +26,7 @@
 
     "unit-case": "lower",
     "unit-no-unknown": true,
-    "unit-whitelist": ["px", "%", "deg", "ms", "em", "rem", "vh", "vv", "s"],
+    "unit-whitelist": ["px", "%", "deg", "ms", "em", "rem", "vh", "vv", "s", "ch"],
 
     "value-list-comma-space-after": "always-single-line",
     "value-list-comma-space-before": "never",
diff --git a/packages/uhk-web/src/app/components/keymap/header/keymap-header.component.html b/packages/uhk-web/src/app/components/keymap/header/keymap-header.component.html
index f76baccb..0d0d32b7 100644
--- a/packages/uhk-web/src/app/components/keymap/header/keymap-header.component.html
+++ b/packages/uhk-web/src/app/components/keymap/header/keymap-header.component.html
@@ -7,6 +7,7 @@
                    type="text"
                    (change)="editKeymapName($event.target.value)"
                    (keyup.enter)="name.blur()"
+                   (keyup)="calculateHeaderTextWidth($event.target.value)"
             /> keymap
             (<input #abbr cancelable
                     class="keymap__abbrev pane-title__abbrev"
diff --git a/packages/uhk-web/src/app/components/keymap/header/keymap-header.component.ts b/packages/uhk-web/src/app/components/keymap/header/keymap-header.component.ts
index b3b0954b..30f35578 100644
--- a/packages/uhk-web/src/app/components/keymap/header/keymap-header.component.ts
+++ b/packages/uhk-web/src/app/components/keymap/header/keymap-header.component.ts
@@ -3,6 +3,7 @@ import {
     Component,
     ElementRef,
     EventEmitter,
+    HostListener,
     Input,
     OnChanges,
     Output,
@@ -16,6 +17,7 @@ import { Store } from '@ngrx/store';
 
 import { AppState } from '../../../store';
 import { KeymapActions } from '../../../store/actions';
+import * as util from '../../../util';
 
 const DEFAULT_TRASH_TITLE = '<span class="text-nowrap">Delete keymap</span>';
 
@@ -50,6 +52,11 @@ export class KeymapHeaderComponent implements OnChanges {
         }
     }
 
+    @HostListener('window:resize')
+    windowResize(): void {
+        this.calculateHeaderTextWidth(this.keymap.name);
+    }
+
     setDefault() {
         if (!this.keymap.isDefault) {
             this.store.dispatch(KeymapActions.setDefault(this.keymap.abbreviation));
@@ -103,8 +110,16 @@ export class KeymapHeaderComponent implements OnChanges {
         this.downloadClick.emit();
     }
 
+    calculateHeaderTextWidth(text): void {
+        const htmlInput = this.keymapName.nativeElement as HTMLInputElement;
+        const maxWidth = htmlInput.parentElement.offsetWidth - 530;
+        const textWidth = util.getContentWidth(window.getComputedStyle(htmlInput), text);
+        this.renderer.setStyle(htmlInput, 'width', Math.min(maxWidth, textWidth) + 'px');
+    }
+
     private setName(): void {
         this.renderer.setProperty(this.keymapName.nativeElement, 'value', this.keymap.name);
+        this.calculateHeaderTextWidth(this.keymap.name);
     }
 
     private setAbbreviation() {
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.scss b/packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.scss
index 4ab8a009..eb8617d3 100644
--- a/packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.scss
+++ b/packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.scss
@@ -19,6 +19,7 @@
         a {
             border-top-right-radius: 0;
             border-bottom-right-radius: 0;
+            user-select: none;
 
             &.selected {
                 font-style: italic;
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.html b/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.html
index 06568c6e..920e35b0 100644
--- a/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.html
+++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.html
@@ -1,26 +1,30 @@
 <div class="macro-delay">
     <div class="row">
         <div class="col-xs-12">
-            <h4>Enter delay in seconds</h4>
+            <h4>Delay</h4>
         </div>
     </div>
     <div class="row">
-        <div class="col-xs-4">
-          <input #macroDelayInput
-                 type="number" 
-                 min="0" 
-                 max="1000" 
-                 step="0.1" 
-                 placeholder="Delay amount" 
-                 class="form-control"
-                 [value]="delay"
-                 (change)="setDelay(macroDelayInput.value)">
+        <div class="col-xs-12">
+            <div class="form-group">
+                <input #macroDelayInput
+                       type="number"
+                       min="0"
+                       max="1000"
+                       step="0.1"
+                       placeholder="Delay amount"
+                       class="form-control"
+                       [ngModel]="delay"
+                       (ngModelChange)="setDelay(macroDelayInput.value)">
+                <label>seconds</label>
+            </div>
         </div>
     </div>
     <div class="row macro-delay__presets">
         <div class="col-xs-12">
-          <h6>Choose a preset</h6>
-          <button *ngFor="let delay of presets" class="btn btn-sm btn-default" (click)="setDelay(delay)">{{delay}}s</button>
+            <h6>Choose a preset</h6>
+            <button *ngFor="let delay of presets" class="btn btn-sm btn-default" (click)="setDelay(delay)">{{delay}}s
+            </button>
         </div>
     </div>
 </div>
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.scss b/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.scss
index 91c61376..49725d48 100644
--- a/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.scss
+++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.scss
@@ -14,3 +14,12 @@
         }
     }
 }
+
+.form-group {
+    margin-bottom: 0;
+}
+
+.form-control {
+    width: 16ch;
+    display: inline-block;
+}
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.ts b/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.ts
index 560a39ec..60d5de48 100644
--- a/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.ts
+++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.ts
@@ -23,9 +23,19 @@ export class MacroDelayTabComponent extends MacroBaseComponent implements OnInit
     @Input() macroAction: DelayMacroAction;
     @ViewChild('macroDelayInput') input: ElementRef;
 
-    delay: number;
     presets: number[] = [0.3, 0.5, 0.8, 1, 2, 3, 4, 5];
 
+    get delay(): number {
+        return this._delay;
+    }
+
+    set delay(value: number) {
+        this._delay = value;
+        this.validate();
+    }
+
+    private _delay: number;
+
     constructor() { super(); }
 
     ngOnInit() {
@@ -33,12 +43,11 @@ export class MacroDelayTabComponent extends MacroBaseComponent implements OnInit
             this.macroAction = new DelayMacroAction();
         }
         this.delay = this.macroAction.delay > 0 ? this.macroAction.delay / 1000 : INITIAL_DELAY;
-        this.validate(); // initial validation as it has defaults
     }
 
     setDelay(value: number): void {
-        this.delay = value;
-        this.macroAction.delay = this.delay * 1000;
+        this._delay = value;
+        this.macroAction.delay = this._delay * 1000;
         this.validate();
     }
 
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.html b/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.html
index a497f01c..f8f3b1b5 100644
--- a/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.html
+++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.html
@@ -36,29 +36,55 @@
     <div class="col-xs-9 macro-mouse__actions" [ngSwitch]="activeTab">
         <div #tab *ngSwitchCase="TabName.Move">
             <h4>Move pointer</h4>
-            <p>Use negative values to move down or left from current position.</p>
             <div class="form-horizontal">
                 <div class="form-group">
-                    <label for="move-mouse-x">X</label>
-                    <input id="move-mouse-x" type="number" class="form-control" [(ngModel)]="macroAction['x']"  (keyup)="validate()"> pixels
+                    <label for="move-mouse-x">X:</label>
+                    <input id="move-mouse-x"
+                           type="number"
+                           class="form-control"
+                           [(ngModel)]="macroAction['x']"
+                           (keyup)="validate()"
+                           min="-9999"
+                           max="9999"
+                           maxlength="4"> pixels
                 </div>
                 <div class="form-group">
-                    <label for="move-mouse-y">Y</label>
-                    <input id="move-mouse-y" type="number" class="form-control" [(ngModel)]="macroAction['y']"  (keyup)="validate()"> pixels
+                    <label for="move-mouse-y">Y:</label>
+                    <input id="move-mouse-y"
+                           type="number"
+                           class="form-control"
+                           [(ngModel)]="macroAction['y']"
+                           (keyup)="validate()"
+                           min="-9999"
+                           max="9999"
+                           maxlength="4"> pixels
                 </div>
             </div>
         </div>
         <div #tab *ngSwitchCase="TabName.Scroll">
             <h4>Scroll</h4>
-            <p>Use negative values to move down or left from current position.</p>
             <div class="form-horizontal">
                 <div class="form-group">
-                    <label for="scroll-mouse-x">X</label>
-                    <input id="scroll-mouse-x" type="number" class="form-control" [(ngModel)]="macroAction['x']" (keyup)="validate()"> pixels
+                    <label for="scroll-mouse-x">X:</label>
+                    <input id="scroll-mouse-x"
+                           type="number"
+                           class="form-control"
+                           [(ngModel)]="macroAction['x']"
+                           (keyup)="validate()"
+                           min="-9999"
+                           max="9999"
+                           maxlength="4"> pixels
                 </div>
                 <div class="form-group">
-                    <label for="scroll-mouse-y">Y</label>
-                    <input id="scroll-mouse-y" type="number" class="form-control" [(ngModel)]="macroAction['y']" (keyup)="validate()"> pixels
+                    <label for="scroll-mouse-y">Y:</label>
+                    <input id="scroll-mouse-y"
+                           type="number"
+                           class="form-control"
+                           [(ngModel)]="macroAction['y']"
+                           (keyup)="validate()"
+                           min="-9999"
+                           max="9999"
+                           maxlength="4"> pixels
                 </div>
             </div>
         </div>
@@ -66,11 +92,12 @@
             <h4 *ngIf="activeTab === TabName.Click">Click mouse button</h4>
             <h4 *ngIf="activeTab === TabName.Hold">Hold mouse button</h4>
             <h4 *ngIf="activeTab === TabName.Release">Release mouse button</h4>
-            <div class="btn-group macro-mouse__buttons">
+            <div class="btn-group">
                 <button *ngFor="let buttonLabel of buttonLabels; let buttonIndex = index"
                         class="btn btn-default"
                         [class.btn-primary]="hasButton(buttonIndex)"
-                        (click)="setMouseClick(buttonIndex)">{{buttonLabel}}</button>
+                        (click)="setMouseClick(buttonIndex)">{{buttonLabel}}
+                </button>
             </div>
         </div>
     </div>
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.scss b/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.scss
index 50596da0..c8ce1f3f 100644
--- a/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.scss
+++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.scss
@@ -15,11 +15,6 @@
         padding-left: 3rem;
         padding-bottom: 1rem;
     }
-
-    &__buttons {
-        margin-top: 3rem;
-        margin-bottom: 1rem;
-    }
 }
 
 .fa {
@@ -38,6 +33,6 @@
 
     .form-control {
         display: inline-block;
-        width: 60%;
+        width: 10ch;
     }
 }
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts b/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts
index 3a8f31f9..1835c19a 100644
--- a/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts
+++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts
@@ -26,7 +26,7 @@ enum TabName {
         '../../macro-action-editor.component.scss',
         './macro-mouse.component.scss'
     ],
-    host: { 'class': 'macro__mouse' }
+    host: {'class': 'macro__mouse'}
 })
 export class MacroMouseTabComponent extends MacroBaseComponent implements OnInit {
     @Input() macroAction: MouseMacroAction;
@@ -130,14 +130,14 @@ export class MacroMouseTabComponent extends MacroBaseComponent implements OnInit
         switch (this.macroAction.constructor) {
             case MoveMouseMacroAction:
             case ScrollMouseMacroAction:
-                const { x, y } = this.macroAction as MoveMouseMacroAction;
-                return x !== undefined && x !== null && y !== undefined && y !== null;
+                const {x, y} = this.macroAction as MoveMouseMacroAction;
+                return x !== undefined && x !== null && y !== undefined && y !== null &&
+                    (x !== 0 || y !== 0) && x < 10000 && x > -10000 && y < 10000 && y > -10000;
             case MouseButtonMacroAction:
-                const { mouseButtonsMask } = this.macroAction as MouseButtonMacroAction;
+                const {mouseButtonsMask} = this.macroAction as MouseButtonMacroAction;
                 return !!mouseButtonsMask;
             default:
                 return true;
         }
-    }
-
+    };
 }
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.html b/packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.html
index e503708d..7f771ba0 100644
--- a/packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.html
+++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.html
@@ -1,6 +1,5 @@
 <div>
     <h4>Type text</h4>
-    <p>Input the text you want to type with this macro action.</p>
     <textarea #macroTextInput name="macro-text" (change)="onTextChange()"
     (keyup)="validate()" class="macro__text-input">{{ macroAction?.text }}</textarea>
 </div>
diff --git a/packages/uhk-web/src/app/components/macro/header/macro-header.component.html b/packages/uhk-web/src/app/components/macro/header/macro-header.component.html
index cd8b4274..f5887df0 100644
--- a/packages/uhk-web/src/app/components/macro/header/macro-header.component.html
+++ b/packages/uhk-web/src/app/components/macro/header/macro-header.component.html
@@ -7,7 +7,7 @@
                    type="text"
                    (change)="editMacroName($event.target.value)"
                    (keyup.enter)="macroName.blur()"
-            />
+                   (keyup)="calculateHeaderTextWidth($event.target.value)">
             <i class="glyphicon glyphicon-trash macro__remove pull-right" title=""
                data-toggle="tooltip"
                data-placement="bottom"
diff --git a/packages/uhk-web/src/app/components/macro/header/macro-header.component.scss b/packages/uhk-web/src/app/components/macro/header/macro-header.component.scss
index 0d73e752..8b19d037 100644
--- a/packages/uhk-web/src/app/components/macro/header/macro-header.component.scss
+++ b/packages/uhk-web/src/app/components/macro/header/macro-header.component.scss
@@ -32,7 +32,6 @@
         border-bottom: 2px dotted #999;
         padding: 0;
         margin: 0 0.25rem;
-        width: 330px;
         text-overflow: ellipsis;
 
         &:focus {
diff --git a/packages/uhk-web/src/app/components/macro/header/macro-header.component.ts b/packages/uhk-web/src/app/components/macro/header/macro-header.component.ts
index 9465ebdb..d481aee7 100644
--- a/packages/uhk-web/src/app/components/macro/header/macro-header.component.ts
+++ b/packages/uhk-web/src/app/components/macro/header/macro-header.component.ts
@@ -3,6 +3,7 @@ import {
     ChangeDetectionStrategy,
     Component,
     ElementRef,
+    HostListener,
     Input,
     OnChanges,
     Renderer2,
@@ -13,7 +14,8 @@ import { Store } from '@ngrx/store';
 import { Macro } from 'uhk-common';
 
 import { MacroActions } from '../../../store/actions';
-import { AppState } from '../../../store/index';
+import { AppState } from '../../../store';
+import * as util from '../../../util';
 
 @Component({
     selector: 'macro-header',
@@ -43,6 +45,11 @@ export class MacroHeaderComponent implements AfterViewInit, OnChanges {
         }
     }
 
+    @HostListener('window:resize')
+    windowResize(): void {
+        this.calculateHeaderTextWidth(this.macro.name);
+    }
+
     removeMacro() {
         this.store.dispatch(MacroActions.removeMacro(this.macro.id));
     }
@@ -60,12 +67,20 @@ export class MacroHeaderComponent implements AfterViewInit, OnChanges {
         this.store.dispatch(MacroActions.editMacroName(this.macro.id, name));
     }
 
+    calculateHeaderTextWidth(text): void {
+        const htmlInput = this.macroName.nativeElement as HTMLInputElement;
+        const maxWidth = htmlInput.parentElement.offsetWidth * 0.8;
+        const textWidth = util.getContentWidth(window.getComputedStyle(htmlInput), text);
+        this.renderer.setStyle(htmlInput, 'width', Math.min(maxWidth, textWidth) + 'px');
+    }
+
     private setFocusOnName() {
         this.macroName.nativeElement.select();
     }
 
     private setName(): void {
         this.renderer.setProperty(this.macroName.nativeElement, 'value', this.macro.name);
+        this.calculateHeaderTextWidth(this.macro.name);
     }
 
 }
diff --git a/packages/uhk-web/src/app/components/macro/item/macro-item.component.scss b/packages/uhk-web/src/app/components/macro/item/macro-item.component.scss
index ab9c2b2b..7262b874 100644
--- a/packages/uhk-web/src/app/components/macro/item/macro-item.component.scss
+++ b/packages/uhk-web/src/app/components/macro/item/macro-item.component.scss
@@ -31,6 +31,7 @@
         flex-shrink: 0;
         border: 0;
         border-bottom: 1px solid #ddd;
+        user-select: none;
 
         icon {
             margin: 0 5px;
diff --git a/packages/uhk-web/src/app/util/html-helper.ts b/packages/uhk-web/src/app/util/html-helper.ts
new file mode 100644
index 00000000..3c148c86
--- /dev/null
+++ b/packages/uhk-web/src/app/util/html-helper.ts
@@ -0,0 +1,17 @@
+let canvas: HTMLCanvasElement;
+
+export function getContentWidth(style: CSSStyleDeclaration, text: string): number {
+    if (!text) {
+        return 0;
+    }
+
+    if (!canvas) {
+        canvas = document.createElement('canvas');
+    }
+
+    const context = canvas.getContext('2d');
+    context.font = style.font;
+    const metrics = context.measureText(text);
+
+    return metrics.width;
+}
diff --git a/packages/uhk-web/src/app/util/index.ts b/packages/uhk-web/src/app/util/index.ts
new file mode 100644
index 00000000..0a1e1d6e
--- /dev/null
+++ b/packages/uhk-web/src/app/util/index.ts
@@ -0,0 +1 @@
+export * from './html-helper';