From 750188def9897fe128790a723ac7b9e2ea76a863 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Fri, 2 Jul 2021 11:22:02 +0200
Subject: [PATCH] fix up spacing

---
 .../editor-ui/src/components/VersionCard.vue  | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/editor-ui/src/components/VersionCard.vue b/packages/editor-ui/src/components/VersionCard.vue
index 1036b6c8b3..4dc9dfa19f 100644
--- a/packages/editor-ui/src/components/VersionCard.vue
+++ b/packages/editor-ui/src/components/VersionCard.vue
@@ -1,15 +1,17 @@
 <template>
 	<a :href="version.documentationUrl" target="_blank" :class="$style.card">
 		<div :class="$style.header">
-			<div :class="$style.name">
-				Version {{version.name}}
+			<div>
+				<div :class="$style.name">
+					Version {{version.name}}
+				</div>
+				<el-tooltip class="item" effect="light" content=" " placement="top" v-if="version.hasSecurityIssue">
+					<div slot="content">This version has a security issue.<br/>It is listed here for completeness.</div>
+					<font-awesome-icon :class="$style['security-flag']" icon="exclamation-triangle"></font-awesome-icon>
+				</el-tooltip>
+				<el-tag type="danger" v-if="version.hasSecurityFix" size="small" :class="$style['security-update']">Security Update</el-tag>
+				<el-tag v-if="version.hasBreakingChange" size="small" :class="$style['breaking-change']">Breaking Change</el-tag>
 			</div>
-			<el-tooltip class="item" effect="light" content=" " placement="top" v-if="version.hasSecurityIssue">
-				<div slot="content">This version has a security issue.<br/>It is listed here for completeness.</div>
-				<font-awesome-icon :class="$style['security-flag']" icon="exclamation-triangle"></font-awesome-icon>
-    			</el-tooltip>
-			<el-tag type="danger" v-if="version.hasSecurityFix" size="small" :class="$style['security-update']">Security Update</el-tag>
-			<el-tag v-if="version.hasBreakingChange" size="small" :class="$style['breaking-change']">Breaking Change</el-tag>
 			<div :class="$style.released">
 				Released {{releaseDate}}
 			</div>
@@ -63,9 +65,17 @@ export default Vue.extend({
 		padding-bottom: 10px;
 
 		> * {
-			margin-right: 5px;
+			display: flex;
 			margin-bottom: 5px;
 		}
+
+		> div:first-child {
+			flex-grow: 1;
+
+			> * {
+				margin-right: 5px;
+			}
+		}
 	}
 
 	.name {
@@ -83,11 +93,9 @@ export default Vue.extend({
 	}
 
 	.released {
-		flex-grow: 1;
 		font-size: 12px;
 		line-height: 18px;
 		color: #909399;
-		text-align: right;
 	}
 
 	.nodes {