diff --git a/css/src/style.scss b/css/src/style.scss
index 32c6a525..e7b123d0 100644
--- a/css/src/style.scss
+++ b/css/src/style.scss
@@ -652,12 +652,12 @@
 		.footer {
 			border-top: 1px solid $gray_light;
 			flex: 0 0 auto;
-			height: 30px;
+			height: 44px;
 			display: flex;
 			justify-content: space-between;
 
-			a {
-				padding: 7px;
+			>span, button {
+				padding: 14px;
 
 				&.info {
 					cursor: default;
@@ -667,6 +667,16 @@
 					display: block;
 				}
 			}
+
+			button {
+				box-sizing: border-box;
+				width: 44px;
+				height: 44px;
+				margin: 0;
+				cursor: pointer;
+				border: none;
+				background-color: transparent;
+			}
 		}
 
 		.title {
@@ -798,6 +808,231 @@
 				margin-bottom: 0;
 				width: 100%;
 				color: var(--color-text-lighter);
+				display: flex;
+
+				> div {
+					display: flex;
+					line-height: 44px;
+
+					&.section-content {
+						flex-grow: 1;
+
+						&.note {
+							border-width: 1px;
+							border-style: solid;
+							border-color: $gray_light;
+							font-size: 13px;
+							line-height: 26px;
+							margin: 0 20px;
+							padding: 5px 15px;
+							cursor: text;
+		
+							.expandingArea {
+								position: relative;
+								margin-left: -1px;
+		
+								textarea,
+								pre {
+									box-shadow: none;
+									background: none repeat scroll 0 0 transparent;
+									border: medium none;
+									line-height: 26px;
+									padding: 0;
+									white-space: pre-wrap;
+									word-wrap: break-word;
+								}
+		
+								textarea {
+									margin: 0 0 0 1px;
+									border-radius: 0;
+									height: 100%;
+									left: 0;
+									overflow: hidden;
+									position: absolute;
+									resize: none;
+									top: 0;
+									width: 100%;
+									color: $gray_dark;
+									font-weight: 500;
+									outline: medium none;
+								}
+		
+								pre {
+									border: 0 none !important;
+									display: block;
+									margin: 0;
+									outline: 0 none;
+									padding: 0 !important;
+									visibility: hidden;
+								}
+							}
+		
+							.note-body,
+							.note-edit {
+								min-height: 140px;
+								word-wrap: break-word;
+								cursor: text;
+								width: 100%;
+		
+								.content-fakeable {
+									&.editing {
+										.display-view {
+											display: none !important;
+										}
+		
+										.edit-view {
+											display: block !important;
+										}
+									}
+		
+									.display-view {
+										cursor: text;
+									}
+		
+									.edit-view {
+										display: none !important;
+									}
+								}
+							}
+						}
+
+						.section-icon {
+							padding: 14px;
+							height: 44px;
+							width: 44px;
+
+							.icon {
+								display: block;
+							}
+
+							.calendar-indicator {
+								display: block;
+								width: 16px;
+								height: 16px;
+								border: none;
+								border-radius: 50%;
+							}
+						}
+
+						.section-title {
+							font-weight: bold;
+							display: inline-block;
+							width: calc(100% - 44px);
+							padding-right: 20px;
+							cursor: pointer;
+						}
+
+						.section-edit {
+							display: none;
+							flex-grow: 1;
+
+							.mx-datepicker {
+								&.date {
+									width: 59%;
+								}
+								&.time {
+									width: 39%
+								}
+							}
+						}
+
+						.detail-multiselect-container {
+							width: calc(100% - 44px);
+							display: flex;
+							align-items: center;
+							padding-right: 20px;
+
+							&.blue .multiselect__single {
+								color: $blue_due;
+							}
+
+							.multiselect.multiselect-vue {
+								width: 100%;
+								margin: 1px -1px;
+								vertical-align: middle;
+
+								&.multiselect--disabled {
+									background-color: var(--color-main-background) !important;
+									cursor: default;
+									.multiselect__single, input:not([type='range']):disabled {
+										background-color: var(--color-main-background) !important;
+										cursor: default;
+									}
+								}
+
+								&.multiselect--active .multiselect__tags {
+									border: 1px solid var(--color-border-dark);
+								}
+
+								.multiselect__tags {
+									border: 1px solid transparent;
+
+									.multiselect__tags-wrap {
+										padding-left: 0px;
+									}
+
+									.multiselect__input {
+										padding: 0px !important;
+										font-weight: bold;
+									}
+
+									.multiselect__single {
+										padding-left: 0px !important;
+										font-weight: bold;
+									}
+								}
+
+								.multiselect__tag {
+									color: $blue_due;
+									background: $gray_easy;
+									font-weight: bold;
+								}
+
+								.multiselect__element {
+									line-height: 1.3em;
+								}
+							}
+						}
+					}
+
+					&.section-utils button {
+						box-sizing: border-box;
+						width: 44px;
+						height: 44px;
+						margin: 0;
+						cursor: pointer;
+						border: none;
+						background-color: transparent;
+						display: none;
+						padding: 14px;
+
+						&:hover .icon {
+							opacity: 0.7;
+						}
+
+						span {
+							display: block;
+						}
+					}
+				}
+
+				&.date:hover button.delete {
+					display: block !important;
+				}
+
+				&.editing {
+					.section-utils button {
+						display: block !important;
+					}
+
+					.section-title {
+						display: none !important;
+					}
+
+					.section-edit {
+						display: inline-block !important;
+					}
+				}
 
 				&:last-of-type {
 					border-bottom: unset;
@@ -816,10 +1051,6 @@
 					color: $yellow;
 				}
 
-				&.date:hover .icon.icon-trash {
-					display: block;
-				}
-
 				&.date .icon {
 					&.icon-calendar-due,
 					&.icon-calendar-overdue,
@@ -835,10 +1066,16 @@
 				}
 
 				&.detail-all-day {
+					label {
+						padding-left: 14px;
+						width: 100%;
+					}
+
 					div,
 					span {
 						cursor: pointer;
 					}
+
 					input[type='checkbox'].checkbox + label {
 						&::before {
 							margin-left: 0;
@@ -850,83 +1087,12 @@
 					}
 				}
 
-				&.editing {
-					.icon {
-						&.detail-save,
-						&.icon-trash {
-							display: block;
-						}
-					}
-
-					.section-title {
-						display: none;
-					}
-
-					.section-edit {
-						display: inline-block;
-					}
-				}
-
 				.icon {
-					&.icon-trash {
-						display: none;
-						margin-left: auto;
-						right: 22px;
-					}
-
 					&.icon-privacy,
 					&.icon-status {
 						opacity: 1;
 						cursor: unset;
 					}
-
-					&.detail-save {
-						display: none;
-						margin-left: auto;
-						right: 44px;
-					}
-				}
-
-				> div {
-					padding-left: 12px;
-					line-height: 44px;
-
-					&.utils {
-						position: absolute;
-						right: 0;
-						top: 0;
-						padding-right: 15px;
-
-						a {
-							vertical-align: middle;
-							display: inline-block;
-						}
-					}
-
-					.section-title {
-						font-weight: bold;
-						margin-left: 12px;
-						line-height: 22px;
-						width: calc(100% - 100px);
-						display: inline-block;
-						vertical-align: middle;
-					}
-
-					.icon {
-						margin: 0;
-						float: unset;
-					}
-
-					.calendar-indicator {
-						position: relative;
-						display: inline-block;
-						width: 16px;
-						height: 16px;
-						border: none;
-						border-radius: 50%;
-						cursor: pointer;
-						vertical-align: middle;
-					}
 				}
 
 				input[type='range'] {
@@ -977,159 +1143,6 @@
 					font-weight: normal;
 					height: 19px;
 				}
-
-				.section-edit {
-					display: none;
-					padding-left: 12px;
-					vertical-align: middle;
-					width: calc(100% - 80px);
-					line-height: 0;
-
-					.mx-datepicker {
-						&.date {
-							width: 59%;
-						}
-						&.time {
-							width: 39%
-						}
-					}
-				}
-
-				.detail-calendar-container .multiselect__single {
-					color: $blue_due;
-				}
-
-				.detail-categories-container,
-				.detail-calendar-container {
-					width: calc(100% - 52px);
-					display: inline-block;
-					margin-left: 12px;
-
-					.multiselect.multiselect-vue {
-						width: 100%;
-						margin: 1px -1px;
-						vertical-align: middle;
-
-						&.multiselect--disabled {
-							background-color: var(--color-main-background) !important;
-							cursor: default;
-							.multiselect__single, input:not([type='range']):disabled {
-								background-color: var(--color-main-background) !important;
-								cursor: default;
-							}
-						}
-
-						&.multiselect--active .multiselect__tags {
-							border: 1px solid var(--color-border-dark);
-						}
-
-						.multiselect__tags {
-							border: 1px solid transparent;
-
-							.multiselect__tags-wrap {
-								padding-left: 0px;
-							}
-
-							.multiselect__input {
-								padding: 0px !important;
-								font-weight: bold;
-							}
-
-							.multiselect__single {
-								padding-left: 0px !important;
-								font-weight: bold;
-							}
-						}
-
-						.multiselect__tag {
-							color: $blue_due;
-							background: $gray_easy;
-							font-weight: bold;
-						}
-
-						.multiselect__element {
-							line-height: 1.3em;
-						}
-					}
-				}
-
-				.note {
-					border-width: 1px;
-					border-style: solid;
-					border-color: $gray_light;
-					font-size: 13px;
-					line-height: 26px;
-					margin: 0 20px;
-					padding: 5px 15px;
-					cursor: text;
-
-					.expandingArea {
-						position: relative;
-						margin-left: -1px;
-
-						textarea,
-						pre {
-							box-shadow: none;
-							background: none repeat scroll 0 0 transparent;
-							border: medium none;
-							line-height: 26px;
-							padding: 0;
-							white-space: pre-wrap;
-							word-wrap: break-word;
-						}
-
-						textarea {
-							margin: 0 0 0 1px;
-							border-radius: 0;
-							height: 100%;
-							left: 0;
-							overflow: hidden;
-							position: absolute;
-							resize: none;
-							top: 0;
-							width: 100%;
-							color: $gray_dark;
-							font-weight: 500;
-							outline: medium none;
-						}
-
-						pre {
-							border: 0 none !important;
-							display: block;
-							margin: 0;
-							outline: 0 none;
-							padding: 0 !important;
-							visibility: hidden;
-						}
-					}
-
-					.note-body,
-					.note-edit {
-						min-height: 140px;
-						word-wrap: break-word;
-						cursor: text;
-
-						.content-fakeable {
-							&.editing {
-								.display-view {
-									display: none !important;
-								}
-
-								.edit-view {
-									display: block !important;
-								}
-							}
-
-							.display-view {
-								cursor: text;
-							}
-
-							.edit-view {
-								display: none !important;
-							}
-						}
-					}
-				}
 			}
 		}
 
diff --git a/src/components/TheDetails.vue b/src/components/TheDetails.vue
index 7995fe57..1a076309 100644
--- a/src/components/TheDetails.vue
+++ b/src/components/TheDetails.vue
@@ -74,11 +74,14 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						class="section detail-start"
 					>
 						<div v-click-outside="() => finishEditing('start')"
+							class="section-content"
 							@click="editProperty('start', $event)"
 						>
-							<span :class="[dateIcon(task.startMoment)]"
-								class="icon"
-							/>
+							<span class="section-icon">
+								<span :class="[dateIcon(task.startMoment)]"
+									class="icon"
+								/>
+							</span>
 							<span class="section-title">
 								{{ startDateString }}
 							</span>
@@ -95,24 +98,27 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 								/>
 							</div>
 						</div>
-						<div class="utils">
-							<a>
-								<span class="icon icon-color detail-save icon-checkmark-color end-edit reactive" />
-							</a>
-							<a class="end-edit" @click="setStart({ task: task, start: null })">
+						<div class="section-utils">
+							<button>
+								<span class="icon icon-color icon-checkmark-color reactive" />
+							</button>
+							<button class="delete" @click="setProperty('start', null)">
 								<span class="icon icon-bw icon-trash reactive" />
-							</a>
+							</button>
 						</div>
 					</li>
 					<li v-show="!task.calendar.readOnly || task.due" :class="{'date': task.dueMoment.isValid(), 'editing': edit=='due', 'high': overdue(task.dueMoment)}"
 						class="section detail-date"
 					>
 						<div v-click-outside="() => finishEditing('due')"
+							class="section-content"
 							@click="editProperty('due', $event)"
 						>
-							<span :class="[dateIcon(task.dueMoment)]"
-								class="icon"
-							/>
+							<span class="section-icon">
+								<span :class="[dateIcon(task.dueMoment)]"
+									class="icon"
+								/>
+							</span>
 							<span class="section-title">
 								{{ dueDateString }}
 							</span>
@@ -129,19 +135,19 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 								/>
 							</div>
 						</div>
-						<div class="utils">
-							<a>
-								<span class="icon icon-color detail-save icon-checkmark-color end-edit reactive" />
-							</a>
-							<a class="end-edit" @click="setDue({ task: task, due: null })">
+						<div class="section-utils">
+							<button>
+								<span class="icon icon-color icon-checkmark-color reactive" />
+							</button>
+							<button class="delete" @click="setProperty('due', null)">
 								<span class="icon icon-bw icon-trash reactive" />
-							</a>
+							</button>
 						</div>
 					</li>
 					<li v-show="isAllDayPossible"
 						class="section detail-all-day reactive"
 					>
-						<div>
+						<div class="section-content">
 							<input id="isAllDayPossible"
 								type="checkbox"
 								class="checkbox"
@@ -159,10 +165,13 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					</li>
 					<li class="section detail-calendar reactive">
 						<div v-click-outside="() => finishEditing('calendar')"
+							class="section-content"
 							@click="editProperty('calendar')"
 						>
-							<span :style="{'background-color': task.calendar.color}" class="calendar-indicator" />
-							<div class="detail-calendar-container">
+							<span class="section-icon">
+								<span :style="{'background-color': task.calendar.color}" class="calendar-indicator" />
+							</span>
+							<div class="detail-multiselect-container blue">
 								<Multiselect
 									:value="task.calendar"
 									:multiple="false"
@@ -182,10 +191,13 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					</li>
 					<li class="section detail-class reactive">
 						<div v-click-outside="() => finishEditing('class')"
+							class="section-content"
 							@click="editProperty('class')"
 						>
-							<span class="icon icon-color icon-privacy" />
-							<div class="detail-calendar-container">
+							<span class="section-icon">
+								<span class="icon icon-color icon-privacy" />
+							</span>
+							<div class="detail-multiselect-container blue">
 								<Multiselect
 									:value="classSelect.find( _ => _.type === task.class )"
 									:multiple="false"
@@ -205,10 +217,13 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					</li>
 					<li class="section detail-class reactive">
 						<div v-click-outside="() => finishEditing('status')"
+							class="section-content"
 							@click="editProperty('status')"
 						>
-							<span :class="[iconStatus]" class="icon" />
-							<div class="detail-calendar-container">
+							<span class="section-icon">
+								<span :class="[iconStatus]" class="icon" />
+							</span>
+							<div class="detail-multiselect-container blue">
 								<Multiselect
 									:value="statusSelect.find( _ => _.type === task.status )"
 									:multiple="false"
@@ -230,11 +245,12 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						class="section detail-priority"
 					>
 						<div v-click-outside="() => finishEditing('priority')"
+							class="section-content"
 							@click="editProperty('priority')"
 						>
-							<span :class="[iconStar]"
-								class="icon"
-							/>
+							<span class="section-icon">
+								<span :class="[iconStar]" class="icon" />
+							</span>
 							<span class="section-title">
 								{{ priorityString }}
 							</span>
@@ -255,22 +271,25 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 								>
 							</div>
 						</div>
-						<div class="utils">
-							<a>
-								<span class="icon icon-color detail-save icon-checkmark-color end-edit reactive" />
-							</a>
-							<a class="end-edit" @click="setProperty('priority', 0)">
+						<div class="section-utils">
+							<button>
+								<span class="icon icon-color icon-checkmark-color reactive" />
+							</button>
+							<button class="delete" @click="setProperty('priority', 0)">
 								<span class="icon icon-bw icon-trash reactive" />
-							</a>
+							</button>
 						</div>
 					</li>
 					<li v-show="!task.calendar.readOnly || task.complete" :class="{'editing': edit=='complete', 'date': task.complete>0}"
 						class="section detail-complete"
 					>
 						<div v-click-outside="() => finishEditing('complete')"
+							class="section-content"
 							@click="editProperty('complete')"
 						>
-							<span :class="[iconPercent]" class="icon" />
+							<span class="section-icon">
+								<span :class="[iconPercent]" class="icon" />
+							</span>
 							<span class="section-title">
 								{{ completeString }}
 							</span>
@@ -291,19 +310,21 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 								>
 							</div>
 						</div>
-						<div class="utils">
-							<a>
-								<span class="icon icon-color detail-save icon-checkmark-color end-edit reactive" />
-							</a>
-							<a class="end-edit" @click="setProperty('complete', 0)">
+						<div class="section-utils">
+							<button>
+								<span class="icon icon-color icon-checkmark-color reactive" />
+							</button>
+							<button class="delete" @click="setProperty('complete', 0)">
 								<span class="icon icon-bw icon-trash reactive" />
-							</a>
+							</button>
 						</div>
 					</li>
 					<li v-show="!task.calendar.readOnly || task.categories.length>0" :class="{'active': task.categories.length>0}" class="section detail-categories">
-						<div>
-							<span :class="[iconCategories]" class="icon detail-categories" />
-							<div class="detail-categories-container">
+						<div class="section-content">
+							<span class="section-icon">
+								<span :class="[iconCategories]" class="icon detail-categories" />
+							</span>
+							<div class="detail-multiselect-container">
 								<Multiselect v-if="task.categories"
 									v-model="task.categories"
 									:multiple="true"
@@ -322,7 +343,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						</div>
 					</li>
 					<li v-show="!task.calendar.readOnly || task.note" class="section detail-note">
-						<div class="note">
+						<div class="section-content note">
 							<div v-click-outside="() => finishEditing('note')"
 								class="note-body selectable"
 								@click="editProperty('note', $event)"
@@ -345,23 +366,23 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				</ul>
 			</div>
 			<div class="footer">
-				<a :style="{visibility: task.calendar.readOnly ? 'hidden' : 'visible'}"
+				<button :style="{visibility: task.calendar.readOnly ? 'hidden' : 'visible'}"
 					class="close-all reactive"
 					@click="removeTask"
 				>
 					<span class="icon icon-bw icon-trash" />
-				</a>
-				<a v-tooltip="{
+				</button>
+				<span v-tooltip="{
 						content: taskInfo,
 						html: true,
 					}"
 					class="info"
 				>
 					<span class="icon icon-info" />
-				</a>
-				<a class="close-all reactive" @click="closeDetails">
+				</span>
+				<button class="close-all reactive" @click="closeDetails">
 					<span class="icon icon-bw icon-hide" />
-				</a>
+				</button>
 			</div>
 		</div>
 		<div v-else class="notice">