finish ticket page looks wise

src/Ticket.vue

@@ -1,23 +1,32 @@
 <template>
 	<div class="single-ticket">
+		<div class="header-bar">
+			<button>
+				{{ t('upschooling', 'Ticket Schließen') }}
+			</button>
+			<button>
+				{{ t('upschooling', 'Speichern') }}
+			</button>
+		</div>
 		<h2>Ticket "ding"</h2>
-		<HeaderlessKeyValueTable :data-rows="{Name: 'Bernd', Status: 'Offen', Ablaufdatum: 'gestern'}" />
+		<KeyValueTable :data-rows="{Name: 'Bernd', Status: 'Offen', Ablaufdatum: 'gestern'}" />
 		<br>
-		<label for="description">Beschreibung</label>
-		<textarea id="description" v-model.trim.lazy="description" />
+		<label for="description">{{ t('upschooling', 'Beschreibung') }}</label>
+		<textarea id="description" v-model.trim.lazy="description" rows="15" />
 		<br>
 		<button @click="save">
 			Speichern
 		</button>
 		<hr>
+		<div class="placeholder" />
 	</div>
 </template>
 
 <script>
-import HeaderlessKeyValueTable from './components/HeaderlessKeyValueTable'
+import KeyValueTable from './components/KeyValueTable'
 export default {
 	name: 'Ticket',
-	components: { HeaderlessKeyValueTable },
+	components: { KeyValueTable },
 	data() {
 		return {
 			description: '',
@@ -32,5 +41,19 @@ export default {
 <style scoped>
 textarea {
 	width: 100%;
+	margin: 0;
+	resize: vertical;
+}
+
+.placeholder {
+	height: 400px;
+	width: 100%;
+	background: #f0f0f0;
+}
+
+.header-bar {
+	display: flex;
+	width: 100%;
+	flex-direction: row-reverse;
 }
 </style>