From 0d822f4096ffaf559bca2a11af75b0e876e24a34 Mon Sep 17 00:00:00 2001
From: Vyacheslav Tumanov <me@slavatumanov.me>
Date: Mon, 29 Jan 2024 22:34:18 +0500
Subject: [PATCH] put comment input field on top when the newest activity is
 first (#4470)

Signed-off-by: Vyacheslav Tumanov <me@slavatumanov.me>
---
 .../src/components/Activity.svelte            | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/plugins/activity-resources/src/components/Activity.svelte b/plugins/activity-resources/src/components/Activity.svelte
index f20f2ca87d..77495b2812 100644
--- a/plugins/activity-resources/src/components/Activity.svelte
+++ b/plugins/activity-resources/src/components/Activity.svelte
@@ -85,7 +85,12 @@
     bind:isNewestFirst
   />
 </div>
-<div class="p-activity select-text" id={activity.string.Activity}>
+{#if isNewestFirst && showCommenInput}
+  <div class="ref-input newest-first">
+    <ActivityExtensionComponent kind="input" {extensions} props={{ object, boundary, focusIndex }} />
+  </div>
+{/if}
+<div class="p-activity select-text" id={activity.string.Activity} class:newest-first={isNewestFirst}>
   {#if filteredMessages.length}
     <Grid column={1} rowGap={0}>
       {#each filteredMessages as message}
@@ -102,8 +107,8 @@
     </Grid>
   {/if}
 </div>
-{#if showCommenInput}
-  <div class="ref-input">
+{#if showCommenInput && !isNewestFirst}
+  <div class="ref-input oldest-first">
     <ActivityExtensionComponent kind="input" {extensions} props={{ object, boundary, focusIndex }} />
   </div>
 {/if}
@@ -111,12 +116,22 @@
 <style lang="scss">
   .ref-input {
     flex-shrink: 0;
-    margin-top: 1.75rem;
-    padding-bottom: 2.5rem;
+    &.newest-first {
+      margin-bottom: 1rem;
+      padding-top: 1rem;
+    }
+    &.oldest-first {
+      padding-bottom: 2.5rem;
+    }
   }
 
   .p-activity {
-    margin-top: 1.75rem;
+    &.newest-first {
+      padding-bottom: 1.75rem;
+    }
+    &:not(.newest-first) {
+      margin: 1.75rem 0;
+    }
   }
 
   .invisible {