diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index 929587f0dc..343067caf8 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -118,7 +118,7 @@ function removeReminderByIndex(index: number) {
     display: flex;
     align-items: center;
 
-    &.overdue :deep(.datepicker a.show) {
+    &.overdue :deep(.datepicker .show) {
       color: var(--danger);
     }
 
@@ -126,7 +126,7 @@ function removeReminderByIndex(index: number) {
       margin-bottom: 0.75rem;
     }
 
-    a.remove {
+    .remove {
       color: var(--danger);
       padding-left: .5rem;
     }
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 05af563463..f08135a5c3 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -771,7 +771,7 @@ $flash-background-duration: 750ms;
     display: flex;
     align-items: center;
 
-    a.remove {
+    .remove {
       color: var(--danger);
       vertical-align: middle;
       padding-left: .5rem;
@@ -782,20 +782,22 @@ $flash-background-duration: 750ms;
   :deep(.datepicker) {
     width: 100%;
 
-    a.show {
+    .show {
       color: var(--text);
       padding: .25rem .5rem;
       transition: background-color $transition;
       border-radius: $radius;
       display: block;
       margin: .1rem 0;
+      width: 100%;
+      text-align: left;
 
       &:hover {
         background: var(--white);
       }
     }
 
-    &.disabled a.show:hover {
+    &.disabled .show:hover {
       background: transparent;
     }
   }