UX: smoother timeline footer animation, padding fix (#12743)

UX: smoother timeline footer animation, padding fix (#12743)

diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 110d737..8bc8b85 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -1103,7 +1103,7 @@ a.mention-group {
 }
 
 #topic-footer-buttons {
-  padding: 0.75em 0;
+  padding: 1.5em 0 0.75em 0;
 
   .topic-footer-main-buttons {
     display: flex;
diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss
index eba6f2b..df7d91f 100644
--- a/app/assets/stylesheets/common/topic-timeline.scss
+++ b/app/assets/stylesheets/common/topic-timeline.scss
@@ -6,13 +6,15 @@
   box-sizing: border-box;
   z-index: z("timeline");
   -webkit-transform: translate3d(0, 0, 0);
-
+  transition: margin-bottom 0.25s ease-in;
   &.timeline-docked-bottom {
+    @media screen and (prefers-reduced-motion: no-preference) {
+      margin-bottom: -1.75em; // animate out footer button height
+    }
     .timeline-footer-controls {
       opacity: 0;
       pointer-events: none;
       cursor: default;
-      height: 0px;
     }
   }
 
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 73cc17d..c1c16da 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -62,6 +62,9 @@
 .topic-timer-info {
   border-top: 1px solid var(--primary-low);
   padding: 10px 0;
+  &:empty {
+    padding: 0;
+  }
   max-width: 758px;
   .topic-timer-heading,
   .slow-mode-heading {

GitHub sha: 28d5a3f2

This commit appears in #12743 which was approved by jjaffeux. It was merged by awesomerobot.

This commit has been mentioned on Discourse Meta. There might be relevant details there: