diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue
index 031493e6a..3cdb76387 100644
--- a/src/components/tasks/partials/quick-add-magic.vue
+++ b/src/components/tasks/partials/quick-add-magic.vue
@@ -107,10 +107,9 @@ const mode = ref(getQuickAddMagicMode())
 const prefixes = computed(() => PREFIXES[mode.value])
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .show-helper-text {
 	right: 0;
 	pointer-events: auto !important;
-	color: inherit !important;
 }
 </style>
diff --git a/src/styles/theme/form.scss b/src/styles/theme/form.scss
index 86c78f2fd..dc2ac1205 100644
--- a/src/styles/theme/form.scss
+++ b/src/styles/theme/form.scss
@@ -57,7 +57,7 @@
 }
 
 .field.has-addons .control .select select {
-    height: 100%;
+  height: 100%;
 }
 
 .control.has-icons-left .icon,
@@ -103,3 +103,9 @@ h1, h2, h3 {
     height: auto;
   }
 }
+
+// Global style, because the rest of this styling is imported from bulma
+.control.has-icons-left .icon,
+.control.has-icons-right .icon {
+  transition: all $transition;
+}