fix: improve "fading out" of error tooltips, closes #1181

frontend/src/components/design/ErrorTooltip.vue

@@ -6,39 +6,41 @@ const props = defineProps<{
   errorMessages?: (string | ErrorObject)[];
 }>();
 
-const formattedError = computed<string | Ref<string>>(() => {
+const formattedError = computed<string | Ref<string> | undefined>(() => {
   if (!props.errorMessages || props.errorMessages.length === 0) {
-    return "";
+    // eslint-disable-next-line unicorn/no-useless-undefined
+    return undefined;
   }
   return isErrorObject(props.errorMessages[0]) ? props.errorMessages[0].$message : props.errorMessages[0];
 });
-
-const hasError = computed<boolean>(() => {
-  return props.errorMessages ? props.errorMessages.length > 0 : false;
-});
 </script>
 
 <template>
   <!-- hardcoding the id is meh, but else hydration breaks and it doesn't actually seem to be used for accessibility? -->
   <Tooltip
     v-bind="$attrs"
-    :shown="hasError"
+    :shown="Boolean(formattedError)"
     theme="error-tooltip"
     :triggers="[]"
     :delay="0"
     placement="bottom"
     class="text-center reset-popper"
     aria-id="tooltip"
     :container="false"
+    handle-resize
   >
     <slot />
     <template #popper>
-      {{ formattedError || "error" }}
+      {{ formattedError }}
     </template>
   </Tooltip>
 </template>
 
 <style>
+.v-popper--theme-error-tooltip {
+  transition-duration: 0s !important;
+}
+
 .v-popper--theme-error-tooltip .v-popper__inner {
   max-width: 700px;
   background-color: #d62e22;