Make touchable areas of buttons larger

src/sass/components/_buttons.scss

@@ -104,8 +104,8 @@
     font-size: $font-size-base;
     font-family: $font-family-icons;
     line-height: 1;
-    height: 2em;
+    height: 2.5em;
-    width: 2em;
+    width: 2.5em;
     text-align: center;
     -webkit-font-smoothing: antialiased;
     @include respond-to(desktop) {
@@ -127,7 +127,7 @@
     &.active {
         outline: 0;
         top: 2px;
-        left: 2px;
+        right: -2px;
     }
 
     &:after {

src/sass/components/_lightbox.scss

@@ -39,7 +39,7 @@
                 display: block;
                 border: none;
                 background: none;
-                padding: 0;
+                padding: 0 0 0 40px;
                 margin: 0;
                 color: $color-grey-dark;
                 outline: none;

src/sass/views/_mail-list.scss

@@ -12,6 +12,10 @@
         flex-shrink: 0;
         cursor: pointer;
         padding: $padding-vertical $padding-horizontal;
+        @include respond-to(mobile) {
+            padding: ($padding-vertical + 5px) $padding-horizontal;
+        }
+
         &:before {
             color: $color-blue;
             font-size: $font-size-bigger;
@@ -27,20 +31,37 @@
             vertical-align: middle;
             text-shadow: 0px 1px 1px $color-grey-lighter;
         }
-        button {
-            float: right;
-            margin-top: -0.05em; // for perfect vertical alignment with headline
-
-            @include respond-to(desktop) {
-                display: none;
-            }
-        }
 
         &.active {
             background-color: darken($color-white, 10%);
         }
     }
 
+    .compose {
+        position: absolute;
+        top: $padding-vertical;
+        right: $padding-horizontal;
+        margin-top: -0.05em; // for perfect vertical alignment with headline
+        padding-left: 40px;
+
+        &.active {
+            top: $padding-vertical + 2px;
+            right: $padding-horizontal - 2px;
+        }
+
+        @include respond-to(desktop) {
+            display: none;
+        }
+
+        button {
+            &:active,
+            &.active {
+                top: 0;
+                right: 0;
+            }
+        }
+    }
+
     .search {
         flex-shrink: 0;
         padding: 0 $padding-horizontal $padding-vertical $padding-horizontal;

src/sass/views/_read.scss

@@ -50,7 +50,6 @@
 
         .controls {
             float: right;
-            margin: 0 15px 10px;
 
             button {
                 margin-left: 7px;

src/tpl/mail-list.html

@@ -2,9 +2,12 @@
   <!-- nav controll and section headline -->
   <header data-icon="&#xe004;" wo-touch="state.nav.toggle(true); $event.stopPropagation()">
     <h2>{{state.nav.currentFolder.type}}</h2>
-    <button wo-touch="state.writer.write(); $event.stopPropagation()" class="btn-icon" title="New mail"></button>
   </header>
 
+  <div class="compose" wo-touch="state.writer.write(); $event.stopPropagation()">
+    <button class="btn-icon" title="New mail"></button>
+  </div>
+
   <div class="search" data-icon="&#xe017;">
     <input class="input-text" type="text" ng-model="searchText" placeholder="Filter..." focus-me="state.mailList.searching">
   </div>