fix alignment for posts without boosts

Signed-off-by: Robin Appelman <robin@icewind.nl>

3 files changed, 8 insertions, 11 deletions

diff --git a/src/components/TimelineAvatar.vue b/src/components/TimelineAvatar.vue
index ae395b64..25104274 100644
--- a/src/components/TimelineAvatar.vue
+++ b/src/components/TimelineAvatar.vue
@@ -38,9 +38,6 @@ export default {
     width: 32px;
     height: 32px;
     min-width: 32px;
-    flex-shrink: 0;
-    grid-column: 1;
-    grid-row: 2;
     align-self: start;
 }
 
diff --git a/src/components/TimelineEntry.vue b/src/components/TimelineEntry.vue
index cb46bd29..3576b2ef 100644
--- a/src/components/TimelineEntry.vue
+++ b/src/components/TimelineEntry.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="timeline-entry">
+	<div :class="['timeline-entry', hasHeader ? 'with-header' : '']" @click="getSinglePostTimeline">
 		<template v-if="item.type === 'SocialAppNotification'">
 			<div class="notification-icon" :class="notificationIcon" />
 			<span class="notification-action">
@@ -69,6 +69,9 @@ export default {
 			}
 			return {}
 		},
+		hasHeader() {
+			return this.item.type === 'Announce' || this.item.type === 'SocialAppNotification'
+		},
 		boosted() {
 			return t('social', 'boosted')
 		},
@@ -112,10 +115,13 @@ export default {
 }
 </script>
 <style scoped lang="scss">
+  .timeline-entry.with-header {
+    grid-template-rows: 30px 1fr;
+  }
 	.timeline-entry {
 		display: grid;
     grid-template-columns: 44px 1fr;
-    grid-template-rows: 30px 1fr;
+    grid-template-rows: 1fr;
 		padding: 10px;
 		margin-bottom: 10px;
 		&:hover {
diff --git a/src/components/TimelinePost.vue b/src/components/TimelinePost.vue
index 1a124451..2cfe98c4 100644
--- a/src/components/TimelinePost.vue
+++ b/src/components/TimelinePost.vue
@@ -239,12 +239,6 @@ export default {
 		display: flex;
 	}
 
-	.post-content {
-		flex-grow: 1;
-    grid-column: 2;
-    grid-row: 2;
-	}
-
 	.post-header {
 		display: flex;
 		flex-direction: row;