From e0b107a3a0faeb4fe2aaf8883fcef1e3abee7e49 Mon Sep 17 00:00:00 2001
From: ibrokemypie <ibrokemypie@bastardi.net>
Date: Thu, 20 Dec 2018 18:01:29 +1000
Subject: [PATCH] Fix overlap of birthday label on datepicker (#3697)

---
 .../common/views/components/profile-editor.vue    |  2 +-
 .../app/common/views/components/ui/input.vue      | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/client/app/common/views/components/profile-editor.vue b/src/client/app/common/views/components/profile-editor.vue
index 33c53c7dc8..5f462a2586 100644
--- a/src/client/app/common/views/components/profile-editor.vue
+++ b/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>
 
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index d735cc1c2f..d9683e2b90 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/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%