Fix overlap of birthday label on datepicker (#3697)

src/client/app/common/views/components/profile-editor.vue

@@ -24,7 +24,7 @@
 			</ui-input>
 
 			<ui-input v-model="birthday" type="date">
-				<span>{{ $t('birthday') }}</span>
+				<span slot="title">{{ $t('birthday') }}</span>
 				<span slot="prefix"><fa icon="birthday-cake"/></span>
 			</ui-input>
 

src/client/app/common/views/components/ui/input.vue

@@ -6,6 +6,7 @@
 			<div class="value" ref="passwordMetar"></div>
 		</div>
 		<span class="label" ref="label"><slot></slot></span>
+		<span class="title" ref="title"><slot name="title"></slot></span>
 		<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
 		<template v-if="type != 'file'">
 			<input ref="input"
@@ -281,6 +282,20 @@ root(fill)
 			transform-origin top left
 			transform scale(1)
 
+		> .title
+			position absolute
+			z-index 1
+			top fill ? -24px : -17px
+			left 0 !important
+			pointer-events none
+			font-size 16px
+			line-height 32px
+			color var(--inputLabel)
+			pointer-events none
+			//will-change transform
+			transform-origin top left
+			transform scale(.75)
+
 		> input
 			display block
 			width 100%