From 173121fa3a4573c4df00d81866079107b526b3ad Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 22 Apr 2021 16:19:23 -0400
Subject: [PATCH] Fix render-template line-height

---
 app/src/displays/file/file.vue                |  2 +-
 .../interfaces/m2a-builder/m2a-builder.vue    |  1 -
 .../interfaces/translations/translations.vue  | 13 -----------
 .../render-template/render-template.vue       | 22 +++++++++----------
 4 files changed, 11 insertions(+), 27 deletions(-)

diff --git a/app/src/displays/file/file.vue b/app/src/displays/file/file.vue
index 8371681310..77f0b594f4 100644
--- a/app/src/displays/file/file.vue
+++ b/app/src/displays/file/file.vue
@@ -58,7 +58,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 img {
 	width: auto;
-	height: 100%;
+	max-height: 100%;
 	border-radius: var(--border-radius);
 }
 
diff --git a/app/src/interfaces/m2a-builder/m2a-builder.vue b/app/src/interfaces/m2a-builder/m2a-builder.vue
index 472eb332a8..9cae5fb654 100644
--- a/app/src/interfaces/m2a-builder/m2a-builder.vue
+++ b/app/src/interfaces/m2a-builder/m2a-builder.vue
@@ -42,7 +42,6 @@
 						/>
 						<div class="spacer" />
 						<v-icon class="clear-icon" name="clear" @click.stop="deselect((value || [])[item.$index])" />
-						<v-icon class="launch-icon" name="launch" />
 					</v-list-item>
 
 					<v-list-item v-else :key="item.$index" block>
diff --git a/app/src/interfaces/translations/translations.vue b/app/src/interfaces/translations/translations.vue
index a3636eb22c..47679d8f7e 100644
--- a/app/src/interfaces/translations/translations.vue
+++ b/app/src/interfaces/translations/translations.vue
@@ -14,7 +14,6 @@
 			<v-icon class="translate" name="translate" left />
 			<render-template :template="languagesTemplate" :collection="languagesCollection" :item="languageItem" />
 			<div class="spacer" />
-			<v-icon class="launch" name="launch" />
 		</v-list-item>
 
 		<drawer-item
@@ -332,15 +331,3 @@ export default defineComponent({
 	},
 });
 </script>
-
-<style lang="scss" scoped>
-.language-row {
-	.launch {
-		transition: color var(--fast) var(--transition);
-	}
-
-	&:hover .launch {
-		--v-icon-color: var(--foreground-normal);
-	}
-}
-</style>
diff --git a/app/src/views/private/components/render-template/render-template.vue b/app/src/views/private/components/render-template/render-template.vue
index ee630af720..4cd4ee42aa 100644
--- a/app/src/views/private/components/render-template/render-template.vue
+++ b/app/src/views/private/components/render-template/render-template.vue
@@ -1,11 +1,6 @@
 <template>
-	<div
-		class="render-template"
-		ref="templateEl"
-		:style="{
-			lineHeight: height + 'px',
-		}"
-	>
+	<div class="render-template" ref="templateEl">
+		<span class="vertical-aligner" />
 		<template v-for="(part, index) in parts">
 			<value-null :key="index" v-if="part === null || part.value === null" />
 			<component
@@ -32,7 +27,6 @@ import { get } from 'lodash';
 import { Field } from '@/types';
 import { getDisplays } from '@/displays';
 import ValueNull from '@/views/private/components/value-null';
-import useElementSize from '@/composables/use-element-size';
 
 export default defineComponent({
 	components: { ValueNull },
@@ -60,8 +54,6 @@ export default defineComponent({
 
 		const templateEl = ref<HTMLElement>();
 
-		const { height } = useElementSize(templateEl);
-
 		const regex = /({{.*?}})/g;
 
 		const parts = computed(() =>
@@ -122,7 +114,7 @@ export default defineComponent({
 				.map((p) => p || null)
 		);
 
-		return { parts, templateEl, height };
+		return { parts, templateEl };
 	},
 });
 </script>
@@ -135,7 +127,13 @@ export default defineComponent({
 	max-width: 100%;
 	height: 100%;
 	padding-right: 8px;
-	line-height: normal;
+
+	.vertical-aligner {
+		display: inline-block;
+		width: 0;
+		height: 100%;
+		vertical-align: middle;
+	}
 
 	@include no-wrap;