src/App.vue

@@ -1,6 +1,7 @@
 <template>
 	<div id="content" class="app-upschooling">
-		<AppNavigation />
+		<AppNavigation>
+		</AppNavigation>
 		<AppContent>
 			<Ticket />
 		</AppContent>

src/Ticket.vue

@@ -1,32 +1,23 @@
 <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>
-		<KeyValueTable :data-rows="{Name: 'Bernd', Status: 'Offen', Ablaufdatum: 'gestern'}" />
+		<HeaderlessKeyValueTable :data-rows="{Name: 'Bernd', Status: 'Offen', Ablaufdatum: 'gestern'}" />
 		<br>
-		<label for="description">{{ t('upschooling', 'Beschreibung') }}</label>
-		<textarea id="description" v-model.trim.lazy="description" rows="15" />
+		<label for="description">Beschreibung</label>
+		<textarea id="description" v-model.trim.lazy="description" />
 		<br>
 		<button @click="save">
 			Speichern
 		</button>
 		<hr>
-		<div class="placeholder" />
 	</div>
 </template>
 
 <script>
-import KeyValueTable from './components/KeyValueTable'
+import HeaderlessKeyValueTable from './components/HeaderlessKeyValueTable'
 export default {
 	name: 'Ticket',
-	components: { KeyValueTable },
+	components: { HeaderlessKeyValueTable },
 	data() {
 		return {
 			description: '',
@@ -41,19 +32,5 @@ 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>